通过 Google Maps API V3 检索可拖动图钉的纬度和经度 [英] Retrieve latitude and longitude of a draggable pin via Google Maps API V3

查看：25 发布时间：2021/12/25 15:02:50 google-maps-api-3 draggable latitude-longitude

本文介绍了通过 Google Maps API V3 检索可拖动图钉的纬度和经度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我会解释的.我设法在地图上有一个可拖动的图钉.我想检索该点的坐标并将它们放入两个字段:纬度和经度.这些坐标稍后将通过 PHP 发送到 SQL 表.这是我打算做的一个示例，但不是几个图钉，而是一个图钉，它是可拖动.问题是:我什至无法显示初始点的坐标.当然，当用户移动图钉时，我希望字段中的坐标也发生变化.我希望我说清楚了.我做错了什么?我应该使用地理编码服务吗?

JS 来了:

还有 HTML:

<body onload="初始化()"><div id="map_canvas" style="width:50%; height:50%"></div><div id="latlong"><p>纬度:<input size="20" type="text" id="latbox" name="lat" ></p><p>经度:<input size="20" type="text" id="lngbox" name="lng" ></p>

解决方案

这些都行

google.maps.event.addListener(marker, 'click', function (event) {document.getElementById("latbox").value = event.latLng.lat();document.getElementById("lngbox").value = event.latLng.lng();});google.maps.event.addListener(marker, 'click', function (event) {document.getElementById("latbox").value = this.getPosition().lat();document.getElementById("lngbox").value = this.getPosition().lng();});

您也可以考虑使用 dragend 事件

google.maps.event.addListener(marker, 'dragend', function (event) {document.getElementById("latbox").value = this.getPosition().lat();document.getElementById("lngbox").value = this.getPosition().lng();});

I will explain. I managed to have a draggable pin on a map. I want to retrieve the coordinates of this point and put them into two fields: Latitude and Longitude. These coordinates will later be send to a SQL table via PHP. Here is an example of what I intend to do, but instead of several pins, it's just one and it's draggable. The problem is: I'm not even able to display the coordinates of the initial point. And of course when the user moves the pin, I want the coordinates to change as well in the fields. I hope I made myself clear. What did I do wrong? Should I use the Geocoding service?

Here goes the JS:

<script type="text/javascript">
  var map;
  function initialize() {
  var myLatlng = new google.maps.LatLng(40.713956,-74.006653);

  var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
  draggable: true,
  position: myLatlng, 
  map: map,
  title: "Your location"
  });

  google.maps.event.addListener(marker,'click',function(overlay,point){
     document.getElementById("latbox").value = lat();
     document.getElementById("lngbox").value = lng();
     });

}
</script>

And the HTML:

<html>
<body onload="initialize()">

  <div id="map_canvas" style="width:50%; height:50%"></div>

  <div id="latlong">
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
  </div>

</body>
</html>

解决方案

Either of these work

google.maps.event.addListener(marker, 'click', function (event) {
    document.getElementById("latbox").value = event.latLng.lat();
    document.getElementById("lngbox").value = event.latLng.lng();
});

google.maps.event.addListener(marker, 'click', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

You might also consider using the dragend event also

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

这篇关于通过 Google Maps API V3 检索可拖动图钉的纬度和经度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

通过 Google Maps API V3 检索可拖动图钉的纬度和经度 [英] Retrieve latitude and longitude of a draggable pin via Google Maps API V3

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

通过 Google Maps API V3 检索可拖动图钉的纬度和经度 [英] Retrieve latitude and longitude of a draggable pin via Google Maps API V3

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭