谷歌地图会在放置新标记之前清除所有标记

时间:2016-09-24 09:51:28

标签: google-maps google-maps-api-3 google-maps-markers

我正在尝试在google地图上点击一个标记,同时使用lat和lng填充输入框。我需要代码在放置新标记并更新lat和lng之前先清除所有现有标记。一切都有效,除非我添加代码以尝试清除所有标记。

以下代码完美无缺,但在放置新标记之前不会清除旧标记。

谢谢。

不清除现有标记的工作代码......

<div id="map"></div>
<script>

var map;


  function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: latlng,
    });

            google.maps.event.addListener(map, 'click', function(event){
            var marker_position = event.latLng;   
            marker = new google.maps.Marker({
            map: map,
            draggable: false
        }); 
   marker.setPosition(marker_position);   
   document.getElementById("latFld").value = event.latLng.lat();
   document.getElementById("lngFld").value = event.latLng.lng();
})                      
  }  
    </script>

在添加新标记之前,不使用清除标记的代码...

<div id="map"></div>
<script>

var map;
    var markersArray = [];

  function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: latlng,
    });
            markersArray.push(marker);
    google.maps.event.addListener(marker,"click",function(event){});
            google.maps.event.addListener(map, 'click', function(event){
            var marker_position = event.latLng;   
    marker = new google.maps.Marker({
            map: map,
            draggable: false
        });
   clearOverlays();
   marker.setPosition(marker_position);   
   document.getElementById("latFld").value = event.latLng.lat();
   document.getElementById("lngFld").value = event.latLng.lng();
})   

  }

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

谢谢。

1 个答案:

答案 0 :(得分:5)

您似乎已将代码放在错误的位置..尝试

<div id="map"></div>
<script>

var map;
var markersArray = [];

function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: latlng,
    });

   clearOverlays();
    marker = new google.maps.Marker({
            map: map,
            draggable: false
    });

    google.maps.event.addListener(marker,"click",function(event){});
    google.maps.event.addListener(map, 'click', function(event){
    var marker_position = event.latLng;   
        marker.setPosition(marker_position);   
        markersArray.push(marker);
       document.getElementById("latFld").value = event.latLng.lat();
       document.getElementById("lngFld").value = event.latLng.lng();
    })   
} 

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