Question

我在点击时成功创建了一个标记但是，使用以下代码，每次点击都会得到一个新标记，我只想添加一个标记，如果有人点击多次，我希望它能移动现有标记到新的位置任何人都可以帮助这里是代码

 function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }

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

Answer 1

var marker;

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

您必须始终使用相同的标记 - 不要创建新的标记。这里有一个全局变量marker，在placeMarker函数中，您首次为此变量指定标记。下次检查标记是否存在然后只是改变它的位置。

Answer 2

您好我偶然发现了同样的问题，在找到这篇文章之前我想出了这个答案。所以这就是答案：

在map initialize函数中添加eventListener：

function initialize() {
      ...
      google.maps.event.addListener(map, 'click', function(event) {
        addListing(event.latLng);
      });
}

然后创建一个计数器变量并在addListing变量中使用它（我的函数添加标记）：

var i=0
function addListing(location) {
  var addMarker;
  var iMax=1;

  if(i<=iMax) {
      addMarker = new google.maps.Marker({
      draggable:false,
      position: location,
      map: map
  });

  google.maps.event.addListener(addMarker, 'dblclick', function() {
    addMarker.setMap(null);
    i=1;
  });

  i++;

  } else {
      console.log('you can only post' , i-1, 'markers');
      }
}

这种方法的另一个好处（我认为）是你可以通过增加或减少最大计数器值来控制用户可以轻松放置在地图中的标记量（即iMax = 2会增加允许标记的数量）到2）。您可以通过双击来擦除标记，然后将其重新放置在另一个位置。

希望将来能帮到任何人干杯

Answer 3

<div id="map" style="width:100%;height:500px;"></div>

<script>

    var marker;
    var infowindow;

    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter=new google.maps.LatLng(51.508742,-0.120850);
        var mapOptions = {
            center: myCenter, zoom: 18,
            mapTypeId:google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(map, event.latLng);
        });
    }

    function placeMarker(map, location) {
        if (!marker || !marker.setPosition) {
            marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        } else {
            marker.setPosition(location);
        }
        if (!!infowindow && !!infowindow.close) {
            infowindow.close();
        }
        infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map,marker);
    }


</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkG1aDqrbOk28PmyKjejDwWZhwEeLVJbA&callback=myMap"></script>

这很好用 jsfiddle http://jsfiddle.net/incals/o7jwuz12

这是完整的代码： https://github.com/Lavkushwaha/Google_Maps_API_Without_PHP_DOM/blob/master/single.html

Answer 4

您可以尝试直接在听众中制作：

google.maps.event.addListener(Map, 'click', function(event){
    marker.setMap(null);    
    marker = new google.maps.Marker({
        map:       Map,
        position:  event.latLng
    });     
});

Answer 5

使用addListenerOnce，而不是addListener

GoogleMaps v3 API点击时只创建一个标记

5 个答案: