谷歌地图API:如何获得在中心有静态pin的可拖动地图，并在每次移动地图时获得这个pin的位置

Google Maps API: How to get draggable map with static pin at centre and get location of this pin each time map is moved

本文关键字：pin 地图 移动 位置 静态 在中心 何获得 API 谷歌地图 拖动      更新时间：2023-09-26

需要实现一个简单的可拖动地图（无缩放），引脚应保持静止在中心，覆盖地图。每次在静态引脚下移动/拖动地图时，引脚的定位细节都会更新，我可以获取这些定位细节并在上面的输入字段中显示地址。

这可能是一项非常简单的任务，我对谷歌地图没有任何经验，如果有人能给我指一个这样的工作示例，或者指我可以在HTML5/Angular应用程序中使用的API的/库，那就太好了。这会为我节省很多研究时间。谢谢

您可以在dragend事件中重新居中标记，并获取新的lat/long。如果您想将lat/long转换为真实世界的地址，可以将它们传递给反向地理编码器。

var newlat, newlong;
var latitude = 51.5;
var longitude = -0.12;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
  zoom: 8,
  center: coords,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
  document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
  position: coords,
  map: map,
  draggable: true,
});
google.maps.event.addListener(map, 'dragend',
  function() {
    marker.setPosition(map.getCenter());
    newlat = marker.getPosition().lat();
    newlong = marker.getPosition().lng();
    $('#coords').html(newlat + ', ' + newlong);
  })
#mapContainer {
  width: 400px;
  height: 200px;
  border: 1px solid #ebebeb;
}
#coords {
  width: 380px;
  padding: 10px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="mapContainer"></div>
<br>
<div id="coords"></div>

相关文章：