Question

我在我的应用中使用Google地图。

用户可以在地图中的任何位置放置标记。

为此我编写了以下代码：

var marker;

function myMap() {

  var mapCanvas = document.getElementById("map-canvas");
  var myCenter=new google.maps.LatLng(50.833,-12.9167);
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {

    //marker.setMap(null); // this line does not work
    placeMarker(map, event.latLng);
  });
}

function placeMarker(map, location) {

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

}

标记应始终移动到用户单击的位置。这条线

marker.setMap(null);

应该删除旧标记（放置新标记之前）。但是，在代码中使用此行我不能再放置任何标记。不包括此行意味着每个标记都保留在地图中并且不会被删除（即地图随着时间的推移填满标记）。

Answer 1

问题是当setMap变量没有此方法时，您在第一次单击后尝试使用方法marker。因此，首先检查marker是否包含该方法，然后调用它。

google.maps.event.addListener(map, 'click', function(event) {

        // check if setMap is available and call it.
        if(marker.hasOwnProperty('setMap')){
            marker.setMap(null);
        }
        placeMarker(map, event.latLng);

});

Answer 2

查看javascript控制台，您会看到Uncaught TypeError: Cannot read property 'setMap' of undefined。第一次，标记为null，您只需将其地图属性设置为null（如果已存在）。

google.maps.event.addListener(map, 'click', function(event) {

  if (marker) marker.setMap(null);
  placeMarker(map, event.latLng);
});

proof of concept fiddle

代码段

＆＃13;

var marker;

function myMap() {

  var mapCanvas = document.getElementById("map-canvas");
  var myCenter = new google.maps.LatLng(50.833, -12.9167);
  var mapOptions = {
    center: myCenter,
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {

    if (marker) marker.setMap(null); 
    placeMarker(map, event.latLng);
  });
}

function placeMarker(map, location) {

  marker = new google.maps.Marker({
    position: location,
    map: map
  });

}
google.maps.event.addDomListener(window, "load", myMap);

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

＆＃13;

如何在谷歌地图中创建移动标记

2 个答案: