单击时将标记添加到 Google 地图

Posted 2023-02-23

【中文标题】单击时将标记添加到 Google 地图

【英文标题】：Add marker to Google Map on Click

【发布时间】：2013-03-25 10:22:28

【问题描述】：

当用户在地图上单击鼠标左键时，我很难找到一个非常简单的示例来说明如何向 Google 地图添加标记。

过去几个小时我已经环顾四周，并查阅了 Google Maps API 文档，希望能得到一些帮助！

【参考方案1】：

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

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

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

【讨论】：

我们可以让用户只能添加一次吗？并移动标记？

请提供示例链接

【参考方案2】：

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

【参考方案3】：

这实际上是一个文档化的功能，可以在here找到

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

【参考方案4】：

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

【参考方案5】：

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

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

不是

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

Reference

【参考方案6】：

首先声明标记：

this.marker = new google.maps.Marker(
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
);

调用方法以在点击时绘制标记：

this.placeMarker(coordinates, this.map);

定义函数：

placeMarker(location, map) 
    var marker = new google.maps.Marker(
        position: location,
        map: map
    );
    this.markersArray.push(marker);