從簡單的Google Maps v3示例中刪除標記

我是Javascript的初學者，並試圖瞭解Google Maps API v3的作品。在這個網站找到了一個很好的答案，這是最有幫助的答案。 Google Maps JS API v3 - Simple Multiple Marker Example 從簡單的Google Maps v3示例中刪除標記

> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" 
> content="text/html; charset=UTF-8" /> <title>Google Maps Multiple 
> Markers</title> <script 
> src="http://maps.google.com/maps/api/js?sensor=false" 
>   type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> 
> 
> <script type="text/javascript"> 
>  var locations = [ 
>  ['Bondi Beach', -33.890542, 151.274856, 4], 
>  ['Coogee Beach', -33.923036, 151.259052, 5], 
>  ['Cronulla Beach', -34.028249, 151.157507, 3], 
>  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
>  ['Maroubra Beach', -33.950198, 151.259302, 1] 
>  ]; 
> 
>  var map = new google.maps.Map(document.getElementById('map'), { 
>  zoom: 10, 
>  center: new google.maps.LatLng(-33.92, 151.25), 
>  mapTypeId: google.maps.MapTypeId.ROADMAP 
>  }); 
> 
>  var infowindow = new google.maps.InfoWindow(); 
> 
>  var marker, i; 
> 
>  for (i = 0; i < locations.length; i++) { 
>  marker = new google.maps.Marker({ 
>   position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
>   map: map 
>  }); 
> 
>  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
>   return function() { 
>   infowindow.setContent(locations[i][0]); 
>   infowindow.open(map, marker); 
>   } 
>  })(marker, i)); 
>  } </script> </body> </html>

這工作利卡魅力，但我現在想實現，這將刪除特定標記的功能。無論我想要做什麼都會使代碼崩潰。我最後的嘗試是調用一個函數，它會刪除所有標記，如下所示：

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

     marker.setMap(null); 
    } 
}

仍然不起作用。

我在這裏失蹤的是什麼？所有的幫助，我讚賞，因爲我花了幾個小時試圖找出這個...

來源

2012-10-26 Zapmore

你正在覆蓋每個循環的標記對象，所以你的函數deleteMarker將只能刪除最後一個標記。

存儲創建的標記的地方（位置陣列將是一個很好的地方）：

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); 
     } 
    } 
}

來源

2012-10-26 13:41:41

哇！非常感謝你！這幫助我解決了一段時間以來一直存在的問題。知道有一些失蹤，但無法得到我的手。 – Zapmore

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); 
    }

來源

2013-12-10 07:03:41 Mahadev

從簡單的Google Maps v3示例中刪除標記

回答

相關問題