Fatal编程技术网
  • javascript/
  • Javascript 从简单的Google Maps v3示例中删除标记

Javascript 从简单的Google Maps v3示例中删除标记

javascript google-maps-api-3

Javascript 从简单的Google Maps v3示例中删除标记,javascript,google-maps-api-3,google-maps-markers,Javascript,Google Maps Api 3,Google Maps Markers,我是Javascript的初学者，并试图理解Google Maps API v3的工作。在这个网站上找到了一个很好的答案，这是投票率最高的答案 >content=“text/html；charset=UTF-8”/>谷歌地图 >标记src=”http://maps.google.com/maps/api/js?sensor=false" >type=“text/javascript”> > > >变量位置=[ >[Bondi Beach'，-33.890542151.274856，4]

我是Javascript的初学者，并试图理解Google Maps API v3的工作。在这个网站上找到了一个很好的答案，这是投票率最高的答案

>content=“text/html；charset=UTF-8”/>谷歌地图
>标记src=”http://maps.google.com/maps/api/js?sensor=false" 
>type=“text/javascript”>
> 
>   
>变量位置=[
>[Bondi Beach'，-33.890542151.274856，4]，
>[Coogee Beach'，-33.923036151.259052,5]，
>[Cronulla Beach'，-34.028249151.157507,3]，
>[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
>[‘马鲁布拉海滩’，-33.950198151.259302，1]
>     ];
> 
>var map=new google.maps.map（document.getElementById（'map'）{
>缩放：10，
>中心：新谷歌地图LatLng（-33.92151.25），
>mapTypeId:google.maps.mapTypeId.ROADMAP
>     });
> 
>var infowindow=new google.maps.infowindow（）；
> 
>var标记，i；
> 
>对于（i=0；imarker=新的google.maps.marker({
>位置：新的google.maps.LatLng（位置[i][1]，位置[i][2]），
>地图：地图
>       });
> 
>google.maps.event.addListener（标记，'click'，（函数（标记，i）{
>返回函数（）{
>infowindow.setContent（位置[i][0]）；
>信息窗口。打开（地图、标记）；
>         }
>}（标记，i））；
>     }
这就像一个符咒，但现在我试图实现一个功能，将删除特定的标记。无论我想做什么都会让代码崩溃。我最后一次尝试是调用一个函数，该函数将删除所有标记，如下所示：

    function deleteMarker(){
    for (i = 0; i < locations.length; i++) { 

        marker.setMap(null);
    }
}

函数deleteMarker（）{
对于（i=0；i
这仍然不起作用

我在这里错过了什么？
非常感谢您的帮助，因为我花了数小时试图解决这个问题…

您正在覆盖每个循环上的marker对象，因此您的函数deleteMarker只能删除最后一个标记

将创建的标记存储在某个位置（位置数组将是一个好位置）：

（i=0；i 地点[一][4] =标记 =新的google.maps.Marker({ 位置：新的google.maps.LatLng（位置[i][1]，位置[i][2]）， 地图：地图 }); 现在，您可以稍后访问标记对象：

function deleteMarker(m){
    for (i = 0; i < locations.length; i++) { 
         if(m===locations[i][3]){
          locations[i][4].setMap(null);
         } 
    }
}

函数删除标记（m）{
对于（i=0；i
函数初始化映射（结果）{
如果（result.length>0）{
变量映射_选项={
中心：新建google.maps.LatLng（结果[0]。纬度，结果[0]。经度），
zoom:zoomcount，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var google\u map=new google.maps.map（document.getElementById（“map\u画布”），map\u选项）；
var info_window=new google.maps.InfoWindow({
内容：“正在加载”
});
var t=[]；//-->标题
变量x=[]；//-->纬度
变量y=[]；//-->经度
var h=[]；//-->HTML
var f=“female.png”；
var m=“male.png”；
//警报（目标值）；
//var result=getPingDetails（）；
如果（result.length>0）{
对于（_count=0；_count'+result[\u count].firstname+''+result[\u count].lastname+'
'+result[\u count].companyname+'（'+result[\u count].designation+'）
性别：'+result[\u count].Gender+'
手机：'+result[\u count.mobilenumber+'


）；
如果（结果[\u计数].acknowledge==“False”&&result[\u计数].done==“False”）{
h、 推+
''+结果[\u计数].firstname+''+结果[\u计数].lastname+'+
''+result[\u count].companyname+'（'+result[\u count].designation+'）
+
“性别：”+结果[\u计数]。性别+”
”+
'Mobile:'+结果[\u计数].mobilenumber+'
+
'' +
'' +
'' +
'');
}
else if（结果[\u计数]。确认==“True”&&result[\u计数]。完成==“False”）{
h、 推+
''+结果[\u计数].firstname+''+结果[\u计数].lastname+'+
''+result[\u count].companyname+'（'+result[\u count].designation+'）
+
“性别：”+结果[\u计数]。性别+”
”+
'Mobile:'+结果[\u计数].mobilenumber+'
+
'' +
'' +
'' +
'');
}
}
//t.push（“位置名称2”）；
//推（33.84659）；
//y.推力（-84.35686）；
//h.推送（“位置名称2
地址2
”；
var i=0；
用于（t中的项目）{
m=新的google.maps.Marker({
地图：谷歌地图，
动画：google.maps.animation.DROP，
T

for (i = 0; i < locations.length; i++) {  
       locations[i][4] 
         = marker 
           = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
       });



function deleteMarker(m){
    for (i = 0; i < locations.length; i++) { 
         if(m===locations[i][3]){
          locations[i][4].setMap(null);
         } 
    }
}



    function initmap(result) {
        if (result.length > 0) {
            var map_options = {
                center: new google.maps.LatLng(result[0].latitude, result[0].longitude),
                zoom: zoomcount,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

            var info_window = new google.maps.InfoWindow({
                content: 'loading'
            });

            var t = []; // --> Title
            var x = []; // --> latitude
            var y = []; // --> longitude
            var h = []; // --> HTML
            var f = "female.png";
            var m = "male.png";
            // alert(obj.value);
            // var result = getPingDetails();

            if (result.length > 0) {
                for (_count = 0; _count < result.length; _count++) {
                    t.push(result[_count].mobileuser);
                    x.push(result[_count].latitude);
                    y.push(result[_count].longitude);
                    var src = "http://www.eangelgps.com/image.ashx?id=" + result[_count].mobileuser;
                    //if (result[_count].gender == "Male") src += m;
                    //else src += f;
                    //h.push('<div style="height:120px;"><p><img src="' + src + '" /><strong>' + result[_count].firstname + " " + result[_count].lastname + '</strong><br/>' + result[_count].companyname + '(' + result[_count].designation + ')<br/>Gender:' + result[_count].gender + '<br />Mobile:' + result[_count].mobilenumber + '<br /><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details...</a><br /><br /><input type="button" value="Acknowledge" onclick="javascript:acknowledged(' + result[_count].pingId + ');" /></p></div>');
                    if (result[_count].acknowledge == "False" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Acknowledge" class="button" onclick="javascript:acknowledged(' + result[_count].pingId + ',this);" /><input type="button" class="button" value="Done" style="display:none;" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                    else if (result[_count].acknowledge == "True" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Done" class="button" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                }
                // t.push('Location Name 2');
                // x.push(33.84659);
                // y.push(-84.35686);
                // h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

                var i = 0;
                for (item in t) {

                     m = new google.maps.Marker({
                        map: google_map,
                        animation: google.maps.Animation.DROP,
                        title: t[i],
                        position: new google.maps.LatLng(x[i], y[i]), html: h[i]
                        //position:
                    });

                    google.maps.event.addListener(m, 'click', function () {
                        info_window.setContent(this.html);
                        info_window.open(google_map, this);
                    });
                    i++;
                }
            }
            //result = null;
        }

        //else { window.document.getElementById('map_canvas').innerHTML = '<div style="vertical-align:middle;width:50%; height:50%;margin:0 auto; padding:20% 0 0 0;"> On click of iOS user name on left panel<br /> OR <br /> Check state(s) on right panel <br /> <br /> Google Map will update here accordingly.</div>'; }
    }


 var markers = [];
    function setAllMap(google_map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(google_map);
        }
    }
    function clearMarkers() {  
        //setMap(null); or
        setMap(clearMarkers);
    }