点击即可将标记添加到Google地图

And*_* R. 81 google-maps google-maps-api-3

令人惊讶的是,当用户点击地图时,我很难找到一个如何向Google地图添加标记的简单示例.

我查看了过去几个小时,并查阅了Google Maps API文档,非常感谢您的帮助!

And*_* R. 161

经过深入研究,我设法找到了解决方案.

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

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}
Run Code Online (Sandbox Code Playgroud)

  • 我们可以让用户只能添加一次吗?并移动标记? (5认同)

Dav*_*ral 39

2017年,解决方案是:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.panTo(position);
}
Run Code Online (Sandbox Code Playgroud)


小智 20

这实际上是一个记录的功能,可以在这里找到

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    map.panTo(position);
  }
Run Code Online (Sandbox Code Playgroud)


小智 12

@Chaibi Alaa,您可以在第一次点击时设置标记,然后只需更改后续点击的位置即可.

var marker;

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

   placeMarker(event.latLng);

});

function placeMarker(location) {

 if (marker == null)
 {
   marker = new google.maps.Marker({
      position: location,
      map: map
  }); } else {   marker.setPosition(location); } }
Run Code Online (Sandbox Code Playgroud)


小智 6

目前,将侦听器添加到地图的方法是

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});
Run Code Online (Sandbox Code Playgroud)

并不是

google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
});
Run Code Online (Sandbox Code Playgroud)

参考