GoogleMaps v3 API在点击上创建只有1个标记

我成功地在点击上创建了一个标记，然而，使用下面的代码，每次点击时我都会得到一个新标记，我只想添加一个标记，并且如果有人点击了多次我想它现有的标记移动到新位置谁能帮助这里是代码GoogleMaps v3 API在点击上创建只有1个标记

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

来源

2010-09-10 rs82uk

真棒，正是我一直在寻找！ – 2014-03-08 23:11:41

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

你必须在相同的标记工作，所有的时间 - 不要创建新的。这里有一个全局变量和placeMarker函数，您可以将标记首次分配给此变量。下一次它会检查标记是否已经存在，然后改变其位置。

来源

2010-09-10 11:47:22 hsz

没有必要。只要使用addListenerOnce – 2010-10-11 15:50:09

然后，如果你两次它不会更新标记的位置。 – hsz 2010-10-12 18:04:31

看看这[jsfiddle]（http://jsfiddle.net/4N4Wm/） – AvL 2013-11-21 21:01:47

-4

使用addListenerOnce，而不是addListener

来源

2010-10-11 15:49:57

这是错误的，因为OP问：“...如果有人点击不止一次，我想它将现有的标记移动到新的职位......“ – 2012-06-28 21:51:32

使用addListenerOnce删除了对if语句的需求。它更干净。 – 2012-06-29 18:21:20

清洁你的，但对OP所面临的问题没有用处。这在这个问题上很重要。 – 2012-06-29 19:25:28

你可以尽量做到直接在你的听众：

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

来源

2013-04-30 20:05:53

你好，我偶然发现了同样的问题，我想出了这个答案找到这个帖子之前。因此，这里的答案：

添加事件监听地图initialize函数内部：

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）。您可以通过双击来擦除标记，并且可以将其重新放置在另一个位置。

希望这有助于在未来的人。
干杯

来源

2014-07-29 03:57:24 edunuke

<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

来源

2017-06-09 18:44:54

这个解释是最好的！ – 2018-02-01 19:35:32

GoogleMaps v3 API在点击上创建只有1个标记

回答

相关问题