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

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

问题是当 marker 变量没有此方法时，您在第一次点击后尝试使用方法 setMap。所以，首先检查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

代码片段：

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

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

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

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

How to create a moving marker in google maps

javascript

google-maps

google-maps-markers