谷歌地圖V3 - 刪除所有標記

Question

我想谷歌地圖V3，如果你放大高於15地圖顯示標記的位置，但當你縮小我想隱藏標記。我找不到任何功能來做到這一點。到目前爲止，我沒有任何工作。

所以這是我的腳本：

<script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
       zoom: 15, 
       center: new google.maps.LatLng(52.429236, 6.281255), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

      setMarkers(map, points); 

      google.maps.event.addListener(map, 'zoom_changed', function() 
{ 
         if (map.getZoom() > 15) { 
           setMarkers(map, points); 
         } else { 
           hideMarkers(map, points); 

         } 
          }); 

     } 


     var points = [ 
      ['Location 1', 52.420891, 6.280204], 
      ['Location 2', 52.420125, 6.279131], 
      ['Location 3', 52.420125, 6.240125] 
     ]; 


     function setMarkers(map, locations) { 
      var image = new google.maps.MarkerImage('../images/map/beachflag.png', 
      new google.maps.Size(20, 32), 
      new google.maps.Point(0,0), 
      new google.maps.Point(0, 32)); 
      var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', 
      new google.maps.Size(37, 32), 
      new google.maps.Point(0,0), 
      new google.maps.Point(0, 32)); 
      var shape = { 
       coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
       type: 'poly' 
      }; 

      for (var i = 0; i < locations.length; i++) { 
       var point = locations[i]; 
       var myLatLng = new google.maps.LatLng(point[1], point[2]); 
       var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       shadow: shadow, 
       icon: image, 
       shape: shape, 
       title: point[0] 
       }); 
      } 
     } 

     function hideMarkers(map, locations) { 
      /* Remove All Markers */ 


      console.log("Remove All Markers"); 
     } 
      </script> 

請任何人可以幫助我蒙山呢？

Answer 1

我修改了你的代碼。我將所有標記的引用保留在數組中。在hideMarkers裏面，我將它們的地圖設置爲null，將它們從地圖中移除。

function initialize() { 
     var mapOptions = { 
      zoom : 15, 
      center : new google.maps.LatLng(52.429236, 6.281255), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     var markers = setMarkers(map, access_points); 

     google.maps.event.addListener(map, 'zoom_changed', function() { 
      if (map.getZoom() > 15) { 
       setMarkers(map, access_points); 
      } 
      else { 
       hideMarkers(map, access_points, markers); 

      } 
     }); 

    } 

    var access_points = [ [ 'Location 1', 52.420891, 6.280204 ], [ 'Location 2', 52.420125, 6.279131 ], [ 'Location 3', 52.420125, 6.240125 ] ]; 

    function setMarkers(map, locations) { 
     var markers= []; 
     var image = new google.maps.MarkerImage('../images/map/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 
       32)); 
     var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0), 
       new google.maps.Point(0, 32)); 
     var shape = { 
      coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ], 
      type : 'poly' 
     }; 

     for (var i = 0; i < locations.length; i++) { 
      var access_point = locations[i]; 
      var myLatLng = new google.maps.LatLng(access_point[1], access_point[2]); 
      var marker = new google.maps.Marker({ 
       position : myLatLng, 
       map : map, 
       shadow : shadow, 
       icon : image, 
       shape : shape, 
       title : access_point[0], 
       zIndex : access_point[3] 
      }); 
      markers.push(marker); 
     } 
     return markers; 
    } 

    function hideMarkers(map, locations, markers) { 
     /* Remove All Markers */ 
     while(markers.length){ 
      markers.pop().setMap(null); 
     } 

     console.log("Remove All Markers"); 
    } 

Answer 2

最簡單的方法可能是稍微修改您的代碼，以便您的標記包含在setMarkers和hideMarkers函數均可訪問的數組中。然後，您可以使用Marker class的setMap方法來添加/刪除您的地圖標記（通過null到setMap刪除從地圖標記）：

var markers = []; 

function createMarkers(/* some args */) { 
    // Create your markers, and add each one to the `markers` array 
} 

function setMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(yourMap); //Add the marker to the map 
    } 
} 

function hideMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); //Remove the marker from the map 
    } 
} 

這種方法也意味着，你不重建每次你想要展示它們時，你所有的Marker實例。