谷歌地图API 3:从右键获取坐标

Google Maps API 3: Get Coordinates from Right-Click

本文关键字：右键 获取 坐标 API 谷歌地图      更新时间：2023-09-26

我有两个文本框，用于用户在数据库中输入新记录的时间。

我有一个实时预览的谷歌地图，工作得很好，现在我想做的是在地图上添加一个右键单击的事件，填充的文本框的经度/纬度与点击的坐标。

这可能吗?

我知道如何添加事件侦听器，并查看了API文档，但没有看到任何这样做的东西。我知道你可以在他们网站上的谷歌地图上做。

google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat=" + lat + "; Lng=" + lng);
});

您可以创建InfoWindow对象(这里的类文档)，并将rightclick事件处理程序附加到它，该处理程序将使用地图上单击位置的纬度和经度填充它。

function initMap() {
  var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(-33.8688, 151.2093)
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      map: map,
    }),
    infowindow = new google.maps.InfoWindow;
  map.addListener('rightclick', function(e) {
    map.setCenter(e.latLng);
    marker.setPosition(e.latLng);
    infowindow.setContent("Latitude: " + e.latLng.lat() +
      "<br>" + "Longitude: " + e.latLng.lng());
    infowindow.open(map, marker);
  });
}
html,
body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script>
<div id="map-canvas"></div>

相关文章：