javascript - remove - 구글 맵 초기화




Google Maps API v3:모든 아이콘을 삭제하는 방법은 무엇인가요? (20)

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 API v2에서 모든지도 표시자를 제거하려면 다음과 같이하면됩니다.

map.clearOverlays();

Google Maps API v3 에서이 작업을 수행하려면 어떻게해야합니까?

Reference API를 보면 나에게 불명확하다.


Google 데모 갤러리에는 데모가 있습니다.

overlay-overview

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

짧게 말하자면, 그들은 마커를 전체 배열로 유지합니다. 그것들을 지우거나 삭제할 때, 그들은 배열을 순환하고 주어진 마커 객체에서 ".setMap (null)"을 호출합니다.

그러나이 예는 '트릭'을 보여줍니다. 이 예제에서 "지우기"는 맵에서 맵을 지우지 만 배열에 보관하면 응용 프로그램이 맵에 신속하게 다시 추가 할 수 있습니다. 어떤면에서 이것은 "숨어있는"것처럼 행동합니다.

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


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

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

찬성

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

단점

  • 지금처럼 프로토 타입과 래퍼를 사용하면 코드가 Google 코드에 종속적이됩니다. 소스에서 시장이 변경되면이 코드는 중단됩니다.
  • 당신이 그것을 이해하지 못하면 당신은 휴식을하면 그것을 고칠 수 없을 것입니다. 기회를 놓치면 어떤 일이 일어나 겠지만 여전히 ..
  • 하나의 마커를 수동으로 제거하면 참조가 여전히 마커 배열에있게됩니다. (당신은 그것을 해결하기 위해 내 setMap 메서드를 편집 할 수 있지만 물마루 배열을 반복하고 참조를 제거하는 비용으로)


rolinger의 대답을 깨끗하고 쉽게 적용 할 수 있습니다.

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

가장 쉬운 방법으로 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();

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

나는 이것을 수정했다. 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 주제에 대한 세부 정보가 포함되었습니다.


나는 kmlLayer.setMap (null)을 가지고 이것을 시도해 보았다. 정상적인 마커에서는 작동하지만 제대로 작동하는지는 확실하지 않습니다.


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

    map.clear();

너는 이렇게 할 수있다.

function clearMarkers(category){ 
  var i;       

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

마커 위로 걸어서 맵에서 제거하면 빈 맵 마커 배열이 표시됩니다.

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

새 버전 v3에서는 배열을 유지할 것을 권장했습니다. 다음과 같이

overlay-overview 샘플을 참조하십시오.

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

여기에서 마커를 제거하는 방법의 예를 찾을 수 있습니다.

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 = [];
}

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

내 경우에는 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);
    }
});

이것은 원래 사용자 질문에 대한 원래 응답에 따라 YingYang Mar 11 '14 15 : 049 에 처음 게시 된 모든 솔루션 중에서 가장 단순 했습니다.

나는 2.5 년 후에 같은 구글 맵스 v3.18을 사용하고 있는데 매력처럼 작동한다.

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

// No need to clear the array after that.

이것을 사용하여지도에서 모든 마커를 제거 할 수 있습니다.

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

지도에서 모든 마커를 제거하려면 다음과 같은 함수를 만듭니다.

1.addMarker (위치) :지도에 아이콘을 추가하는 데 사용되는 함수입니다.

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 = [];
      }

해당 마커에 맵 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);
   }

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

IE에서만 작동합니다.

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

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





google-maps-api-3