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

sourcecode

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

copyscript 2022. 9. 26. 21:53

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

Google Maps API v2에서 모든 지도 마커를 제거하려면 다음 작업을 수행할 수 있습니다.

map.clearOverlays();

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

Reference 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(){});

링거를 .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()를 호출하면 지도상의 모든 마커를 언제든지 찾을 수 있습니다.

단점

지금처럼 프로토타입과 래퍼를 사용하면 내 코드가 구글 코드에 의존하게 되고, 만약 그들이 시장을 바꾼다면 이것은 깨질 것이다.
이해하지 못하면 고장나도 고칠 수 없습니다.그들이 이걸 깨뜨릴 수 있는 어떤 것도 바꿀 가능성은 낮지만, 그래도..
1개의 마커를 수동으로 삭제해도 참조는 마커 배열에 남습니다.(setMap 메서드를 편집하여 수정할 수 있습니다.단, 트로프 마커 배열의 루프와 참조의 삭제가 필요합니다.)

이는 2014년 3월 11일 15:049에 Ying Yang이 최초로 공개한 솔루션 중 가장 심플한 것으로, 유저로부터의 질문에 대한 최초의 회답입니다.

나는 그의 솔루션을 2.5년 후 구글 지도 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에는 없는 것 같아서 위의 커스텀 실장을 사용했습니다.

Disclaimer:이 코드를 작성하지는 않았지만 코드베이스에 병합할 때 참조를 유지하는 것을 잊어버렸기 때문에 어디서 왔는지 알 수 없습니다.

새로운 버전 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;
  }
}

해결책은 꽤 쉽다. 된다, 이렇게 할 수 있어요.marker.setMap(map);이치노

래서를 하면 약약 so 。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 = [];
  }

이게 내 완전한 암호야내가 줄일 수 있는 가장 간단한 방법이야.교환할 수 있으므로 충분히 주의해 주십시오.YOUR_API_KEY키 : 드드 in in in in api api api in in api in in in:

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

Google 개발자 또는 Google 개발자 웹 사이트에서 전체 문서를 참조할 수 있습니다.

Google의 데모 갤러리에서는 다음과 같은 데모를 제공합니다.

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

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

간단히 말해서, 그들은 마커를 글로벌 어레이에 보관합니다.클리어/삭제 시 어레이를 루프하여 지정된 마커 객체의 ".setMap(null)"을 호출합니다.

그러나 이 예에서는 하나의 '꼼수'를 보여 줍니다.이 예에서 "Clear"는 맵에서 삭제하지만 어레이에 보관하는 것을 의미합니다.이것에 의해, 애플리케이션은 그것들을 맵에 재빠르게 재추가할 수 있습니다.어떤 의미에서는, 이것은 그들을 "숨기는" 것과 같은 역할을 한다.

"Delete"를 선택하면 어레이도 삭제됩니다.

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

는 IE에서만 동작합니다.

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

Chrome, Firefox, 즉...

롤링거의 답변을 깔끔하고 쉽게 적용.

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_mapGoogle Maps v3 API입니다.

무슨 일이 일어났는지 궁금하다

업데이트:

"API API"로 한 것 같습니다.set_map는 "아니다"가 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(){});

링거를 .clearOverlays()기능을 합니다.

바로 그거야!!

도움이 되길 바랍니다.

Google-maps-utility-library-v3 프로젝트의 Markermanager 라이브러리를 가장 쉽게 사용할 수 있는 방법을 찾았습니다.

1. Marker Manager를 설정합니다.

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

2. Marker Manager에 마커를 추가합니다.

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

s 3. MarkerManager's에 .clearMarkers()

mgr.clearMarkers();

다음과 같이 할 수도 있습니다.

function clearMarkers(category){ 
  var i;       

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

가장 깔끔한 방법은 맵의 모든 기능을 반복하는 것입니다.마커(다각형, 폴리선 등과 함께)는 지도의 데이터 레이어에 저장됩니다.

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

도면 관리자를 통해 마커를 추가하는 경우 다음과 같이 마커의 전역 배열을 작성하거나 마커를 데이터 레이어에 푸시하는 것이 가장 좋습니다.

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 클래스 메서드를 사용할 수 있으므로 추천합니다.

방금 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"));
}

이것은 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

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

1. addMarker(위치): 지도에 마커를 추가하기 위해 사용하는 함수입니다.

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

3. setMapOnAll(맵): 배열에 마커 정보를 추가하기 위해 사용하는 함수입니다.

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

왜 그랬는지 모르겠지만, 세팅은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 = [];

구글맵 클리어하기

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

위에서 투표한 답변은 대부분 맞지만 한 번에 1개의 마커만 있는 경우(내 상황처럼) 해당 마커의 이전 위치를 삭제하고 새 마커를 추가해야 할 때마다 모든 마커 배열을 만들고 모든 푸시 및 팝에서 마커를 관리할 필요가 없습니다.마커를 저장하기 위해 변수를 만들기만 하면 됩니다.의 이전 위치이며 새 위치 작성 시 해당 위치를 null로 설정할 수 있습니다.

// 마커 위치를 유지할 전역 변수입니다.

var previousMarker;

//새 마커를 추가하는 동안

    if(previousMarker != null)
previousMarker.setMap(null);

var marker = new google.maps.Marker({map: resultsMap, position: new google.maps.LatLng(lat_, lang_)});
previousMarker = marker;

숨기거나 삭제할 때처럼 제거한다는 뜻인가요?

숨긴 경우:

function clearMarkers() {
            setAllMap(null);
        }

삭제할 경우:

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

간단한 해결책을 찾았습니다(제 생각엔).

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

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

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

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

나는 그 일을 잘 하는 속기를 쓴다.그냥 해

    map.clear();

언급URL : https://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers

'sourcecode' 카테고리의 다른 글

PHP 어레이: 개수 또는 크기? (0)	2022.09.26
PHP에서 두 문자열의 차이를 강조 표시합니다. (0)	2022.09.26
MySQL 전체 텍스트 부울 모드 와일드카드로 두 글자 단어 검색 (0)	2022.09.25
Laravel 테이블에서 모든 행(소프트 삭제도 가능)을 가져오려면 어떻게 해야 합니까? (0)	2022.09.25
유형 개체 'datetime.datetime'에 특성 'datetime'이 없습니다. (0)	2022.09.25

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

각종 프로그래밍 정보를 다루는 블로그입니다.

Spring-Boot, jquery, JavaScript, angularjs, vuejs2, WordPress, mongoDB, Powershell, Java, oracle, MySQL, MariaDB, Git, Ajax, C, Python, reactjs, JSON, php, vuex,

Today :
Yesterday :

copyscript

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

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

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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

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

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바