Google지도 V3 - 모든 마커 제거

Question

Google지도 버전 3에서 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 기능에 액세스 할 수있는 배열에 마커가 포함되도록하는 것입니다.

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

이러한 접근 방식은 또한 당신이 다시하지 않는 것을 의미한다 : 당신은 다음 (지도에서 마커를 제거 setMap에 null를 전달) 추가 /지도에서 마커를 제거 Marker class의 setMap 방법을 사용할 수 있습니다 모든 Marker 인스턴스를 표시하려고 할 때마다