GoogleMaps v3 API 点击时仅创建 1 个标记答案

【问题标题】：GoogleMaps v3 API Create only 1 marker on clickGoogleMaps v3 API 点击时仅创建 1 个标记
【发布时间】：2011-04-10 16:50:05
【问题描述】：

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

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

【问题讨论】：

太棒了，正是我想要的！

标签： google-maps google-maps-api-3

【解决方案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 函数中，您第一次将标记分配给该变量。下次它检查标记是否已经存在，然后只是改变它的位置。

【讨论】：

不需要。只需使用 addListenerOnce
它节省了我的时间。非常感谢。

【解决方案2】：

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

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

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

【讨论】：

这个解释最好！

【解决方案3】：

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

在地图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)。您可以通过双击删除标记，然后将其重新放置在另一个位置。

希望它对将来的任何人有所帮助。
干杯

【讨论】：

【解决方案4】：

您可以尝试直接在您的侦听器中制作它：

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

【讨论】：

【解决方案5】：

使用addListenerOnce，而不是addListener

【讨论】：

这是错误的，因为 OP 询问：“......如果有人点击不止一次，我希望它将现有标记移动到新位置......”
使用 addListenerOnce 消除了对 if 语句的需要。它更干净。
对你来说更干净，但对 OP 面临的问题毫无用处。这就是这个问题的重点。