Google Maps API v3 : 모든 마커를 제거하는 방법?

Google Maps API v2에서 모든지도 표시를 제거하려면 간단히 다음을 수행 할 수 있습니다.

map.clearOverlays();

Google Maps API v3 에서 어떻게해야 합니까?

상기 찾고 참조 API , 그것은 나에게 불분명하다.

간단히 다음을 수행하십시오.

I. 전역 변수를 선언하십시오.

var markersArray = [];

II. 함수를 정의하십시오.

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

또는

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. 다음을 호출하기 전에 'markerArray'에서 마커를 푸시하십시오.

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. 필요한 경우 clearOverlays();또는 map.clearOverlays();기능을 호출하십시오 .

그게 다야 !!

같은 문제입니다. 이 코드는 더 이상 작동하지 않습니다.

수정했습니다 .clearMarkers 메소드를 다음과 같이 변경하십시오.

set_map (null) ---> setMap (null)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

https://developers.google.com/maps/documentation/javascript/markers#remove 주제에 대한 세부 사항을 포함하도록 설명서가 업데이트되었습니다.

V3에는 아직 그러한 기능이없는 것 같습니다.

사람들은지도에있는 모든 마커를 배열로 유지하는 것이 좋습니다. 그런 다음 em을 모두 삭제하려면 배열을 루프하여 각 참조에서 .setMap (null) 메서드를 호출하십시오.

자세한 정보 / 코드는이 질문을 참조하십시오.

내 버전 :

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

코드는이 코드의 편집 된 버전입니다. http://www.lootogo.com/googlemapsapi3/markerPlugin.html addMarker를 수동으로 호출 할 필요가 없습니다.

찬성

• 이 방법을 사용하면 코드를 간결하고 한 곳에 보관할 수 있습니다 (네임 스페이스를 오염시키지 않음).
• 더 이상 마커를 직접 추적 할 필요는 없습니다. map.getMarkers ()를 호출하여지도에서 항상 모든 마커를 찾을 수 있습니다.

단점

• 내가했던 것처럼 프로토 타입과 래퍼를 사용하면 코드가 Google 코드에 의존하게됩니다. 소스에서 시장을 변경하면 중단됩니다.
• 당신이 그것을 이해하지 못하면 깨지면 고칠 수 없습니다. 그들이 이것을 깨뜨릴 수있는 것을 바꿀 가능성은 낮지 만 여전히 ..
• 하나의 마커를 수동으로 제거해도 참조는 여전히 마커 배열에 있습니다. (setMap 메소드를 수정하여 수정할 수는 있지만 여물통 마커 배열을 루핑하고 참조를 제거하는 비용)

이것은 원래 질문에 대한 원래의 응답으로 YingYang Mar 11 '14에 15 : 049 에 게시 한 모든 솔루션 중 가장 간단 했습니다.

2.5 년 후 Google지도 v3.18과 동일한 솔루션을 사용하고 있으며 매력처럼 작동합니다.

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

V3에 하나가 없다고 생각하므로 위의 사용자 정의 구현을 사용했습니다.

면책 조항 : 나는이 코드를 작성하지 않았지만 코드베이스에 병합 할 때 참조를 유지하는 것을 잊어 버렸습니다.

새 버전 v3에서는 배열을 유지하는 것이 좋습니다. 다음과 같이.

오버레이 개요의 샘플을 참조하십시오 .

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

Google의 데모 갤러리에는 다음과 같은 방법으로 데모가 있습니다.

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

소스 코드를보고 마커를 추가하는 방법을 볼 수 있습니다.

간단히 말해서 마커를 전역 배열로 유지합니다. 그것들을 지우거나 삭제할 때, 그들은 배열을 반복하고 주어진 마커 객체에서 ".setMap (null)"을 호출합니다.

그러나이 예는 하나의 '트릭'을 보여줍니다. 이 예에서 "지우기"는지도에서 해당 항목을 제거하고 배열에 유지하여 애플리케이션이 신속하게지도에 다시 추가 할 수 있도록합니다. 어떤 의미에서 이것은 "숨김"처럼 작동합니다.

"삭제"도 배열을 지 웁니다.

for (i in markersArray) {
  markersArray[i].setMap(null);
}

IE에서만 작동합니다.

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

크롬, 파이어 폭스, 즉 ...

해결책은 매우 쉽습니다. 다음 방법을 사용할 수 있습니다 marker.setMap(map);.. 여기서 핀이 나타날지도를 정의합니다.

따라서이 null방법 ( marker.setMap(null);)으로 설정하면 핀이 사라집니다.

이제 맵에서 모든 마커를 사라지게하는 동안 함수 마녀를 작성할 수 있습니다.

핀을 배열에 넣고이 markers.push (your_new pin)코드를 사용 하여 다음과 같이 선언하면됩니다 .

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

이것은 기능 마녀가 맵에서 배열의 모든 마커를 설정하거나 숨길 수 있습니다.

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

모든 마커를 사라지게하려면 다음을 사용하여 함수를 호출해야합니다 null.

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

그리고 모든 마커를 제거하고 사라지게하려면 다음과 같이 마커 배열을 재설정해야합니다.

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

이것은 내 완전한 코드입니다. 내가 줄일 수있는 가장 간단한 방법입니다. 핵심 Google API로 코드에서 대체 할 수 있도록 주의하십시오YOUR_API_KEY .

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

당신은 협의 할 수있다 구글 개발자 도, 나에 대한 문서 개발자 웹 사이트를 구글 .

롤링 거의 답변을 깨끗하고 쉽게 적용 할 수 있습니다.

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

set_map두 답변 모두에 게시 된 " "기능은 더 이상 Google Maps v3 API에서 작동하지 않는 것 같습니다.

무슨 일이 있었는지 궁금해

최신 정보:

Google이 " set_map"이 (가) " "가 아닌 API를 변경 한 것으로 보입니다 setMap.

http://code.google.com/apis/maps/documentation/v3/reference.html

다음은 마커를 제거하는 방법의 예입니다.

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

오버레이를 반복적으로 지울 때 깜박임이 있지만 Anon의 다음은 완벽하게 작동합니다.

간단히 다음을 수행하십시오.

I. 전역 변수를 선언하십시오.

var markersArray = [];

II. 함수를 정의하십시오.

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III. 다음을 호출하기 전에 'markerArray'에서 마커를 푸시하십시오.

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. clearOverlays()필요한 곳 에서 함수를 호출하십시오 .

그게 다야 !!

희망이 당신을 도울 것입니다.

가장 쉬운 방법으로 google-maps-utility-library-v3 프로젝트에서 markermanager 라이브러리를 사용하는 것을 발견했습니다.

1. MarkerManager 설정

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. MarkerManager에 마커 추가

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3. 마커를 지우려면 MarkerManger의 clearMarkers()함수 를 호출하면 됩니다.

mgr.clearMarkers();

이 방법으로도 할 수 있습니다.

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

방금 kmlLayer.setMap (null)으로 시도해 보았습니다. 그것이 일반 마커와 함께 작동하지만 확실하게 작동하는지 확실하지 않습니다.

폴리, 마커 등을 포함한 모든 오버레이를 지우려면 ...

간단히 사용하십시오 :

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

다음은지도 응용 프로그램에서 나를 작성하기 위해 작성한 함수입니다.

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

지도에서 모든 마커를 제거하려면 다음과 같은 함수를 작성하십시오.

1. addMarker (location) :이 함수는지도에 마커를 추가하는 데 사용됩니다

2.clearMarkers () :이 함수는 배열이 아닌 맵에서 모든 마커를 제거합니다.

3. setMapOnAll (map) :이 함수는 마커 정보를 배열에 추가하는 데 사용됩니다.

4. deleteMarkers () :이 함수는 참조를 제거하여 배열의 모든 마커를 삭제합니다.

// Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }


// Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

이를 수행하는 가장 깨끗한 방법은지도의 모든 기능을 반복하는 것입니다. 마커 (다각형, 폴리 라인 등)는 맵 의 데이터 레이어 에 저장 됩니다.

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

마커가 drawing manager 를 통해 추가되는 경우 다음과 같이 마커 의 전역 배열을 만들거나 마커를 데이터 레이어로 밀어 넣는 것이 가장 좋습니다.

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

나중에 다른 google.maps.data 클래스 메소드를 사용할 수 있으므로 두 번째 방법을 권장합니다.

이것은 Google이 하나 이상의 샘플에서 사용하는 방법입니다.

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

전체 코드 예제는 Google 샘플을 확인하십시오.

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

왜 그런지 setMap(null)모르겠지만을 사용할 때 마커 설정 이 작동하지 않았습니다 DirectionsRenderer.

제 경우에는 저에게도 전화 setMap(null)해야 DirectionsRenderer했습니다.

그런 것 :

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

마커 위로 걸어서 맵에서 빈 마커 마커 배열을 제거하십시오.

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];

Googlemap을 지우십시오.

mGoogle_map.clear();

제안 된 모든 솔루션을 시도했지만 모든 마커가 클러스터 아래에있는 동안 아무것도 효과가 없었습니다. 결국 나는 이것을 넣었다.

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

즉, 마커를 클러스터에 포장하고 모든 마커를 제거하려면 다음을 호출하십시오.

clearMarkers();

숨기거나 삭제하는 것처럼 제거 하시겠습니까?

숨어있는 경우 :

function clearMarkers() {
            setAllMap(null);
        }

삭제하려는 경우 :

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

배열 마커를 사용하여 추적하고 수동으로 재설정합니다.

해당 마커에 map null을 설정해야합니다.

var markersList = [];    

function removeMarkers(markersList) {
   for(var i = 0; i < markersList.length; i++) {
      markersList[i].setMap(null);
   }
}

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

간단한 해결책을 찾았습니다.

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

나는 일을 잘하는 속기를 사용합니다. 그냥 해

    map.clear();

gmap V3 플러그인을 사용하는 경우 : $("#map").gmap("removeAllMarkers");

참조 : http://www.smashinglabs.pl/gmap/documentation#after-load

나는 이것이 단순한 해결책 일지 모른다는 것을 알고 있지만 이것이 내가하는 일이다.

$("#map_canvas").html("");
markers = [];

나를 위해 매번 작동합니다.