从谷歌标记获取纬度/经度

Posted 2023-03-28

【中文标题】从谷歌标记获取纬度/经度

【英文标题】：Getting Lat/Lng from Google marker

【发布时间】：2011-07-14 12:05:21

【问题描述】：

我制作了一个带有可拖动标记的谷歌地图地图。当用户拖动标记时，我需要知道新的纬度和经度，但我不明白这样做的最佳方法是什么。

如何检索新坐标？

【参考方案1】：

你可以打电话给getPosition() on the Marker - 你试过了吗？

如果您使用的是已弃用的 javascript API v2，您可以调用 getLatLng() on GMarker。

【讨论】：

我认为我的困惑在于何时调用 getPosition() - 我必须添加到构造函数中以便它知道在移动标记时询问坐标吗？跨度>

@Genadinik 我在编辑中链接到的示例可能会有所帮助；它展示了如何为拖动事件附加监听器，您可以在其中查询标记的位置并根据需要使用它。

啊酷，如果我想将坐标存储在会话或数据库中，我应该通过 AJAX 调用来完成吗？还是有更简单的方法？

我想不出比带有标记 id 和当前坐标的快速 Ajax 帖子更简单的事情了 :) 但是您可以考虑批量更新或至少等待几秒钟直到拖动完成并且看到用户不再开始拖动，这样您就不会在标记正在被拖动的过程中淹没服务器 - 等到位置稳定，可以这么说。这当然取决于与客户端看到的相比，您可以承受服务器端状态多远。

getPosition() 返回一个对象，因此要专门获取纬度/经度，您必须分别调用 lat() 和 lng()。

【参考方案2】：

您应该在标记上添加一个侦听器并侦听拖动或拖动事件，并在收到此事件时询问该事件的位置。

有关标记触发的事件的描述，请参阅http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker。有关允许添加事件侦听器的方法，请参阅 http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener。

【参考方案3】：

这里是JSFiddle Demo。在 Google Maps API V3 中，跟踪可拖动标记的 lat 和 lng 非常简单。让我们从以下 HTML 和 CSS 作为我们的基础开始。

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas
    width: 400px;
    height: 300px;


#current
     padding-top: 25px;

这是我们初始化谷歌地图的初始 JavaScript。我们创建一个要拖动的标记，并将其可拖动属性设置为 true。当然请记住，它应该附加到窗口的 onload 事件才能加载，但我会跳到代码：

var map = new google.maps.Map(document.getElementById('map_canvas'), 
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
);

var myMarker = new google.maps.Marker(
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
);

这里我们附加两个事件dragstart 来跟踪拖动的开始，dragend 在标记停止拖动时进行拖动，我们附加的方式是使用google.maps.event.addListener。我们在这里所做的是在拖动标记时设置 div current 的内容，然后在拖动停止时设置标记的 lat 和 lng。 Google 鼠标事件有一个属性名称“latlng”，在事件触发时返回“google.maps.LatLng”对象。因此，我们在这里所做的基本上是使用由google.maps.event.addListener 返回的此侦听器的标识符并获取属性latLng 以提取拖动端的当前位置。一旦我们在拖动停止时获得 Lat Lng，我们将在您的 current div 中显示：

google.maps.event.addListener(myMarker, 'dragend', function(evt)
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
);

google.maps.event.addListener(myMarker, 'dragstart', function(evt)
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
);

最后，我们将标记居中并在地图上显示：

map.setCenter(myMarker.position);
myMarker.setMap(map);

如果您对我的回答有任何疑问，请告诉我。

【参考方案4】：

// show the marker position //

console.log( objMarker.position.lat() );
console.log( objMarker.position.lng() );

// create a new point based into marker position //

var deltaLat = 1.002;
var deltaLng = -1.003;

var objPoint = new google.maps.LatLng( 
  parseFloat( objMarker.position.lat() ) + deltaLat, 
  parseFloat( objMarker.position.lng() ) + deltaLng
);

// now center the map using the new point //

objMap.setCenter( objPoint );

【参考方案5】：

试试这个

var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), 
    center: latlng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
);
var marker = new google.maps.Marker(
    position: latlng,
    map: map,
    title: 'Set lat/lon values for this property',
    draggable: true
);

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

【参考方案6】：

这个问题有很多答案，但对我来说从来没有用过（包括建议 getPosition() 这似乎不是可用于标记对象的方法）。在地图 V3 中对我有用的唯一方法是（简单）：

var lat = marker.lat();
var long = marker.lng();

【讨论】：

我想你的意思是 marker.position.lat() 和 marker.position.lng()

或者你需要使用marker.getPosition().lat()和marker.getPosition().lng()

你不能使用“long”作为变量

【参考方案7】：

var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

更多信息请访问Google Maps API - LatLng

【讨论】：

在调用方法之前如何实例化marker？例如，我正在查看developers.google.com/maps/documentation/javascript/examples/…，在完成搜索并出现标记后，我如何获得该标记的纬度/经度？

【参考方案8】：

var map = new google.maps.Map(document.getElementById('map_canvas'), 
  zoom: 10,
  center: new google.maps.LatLng(13.103, 80.274),
  mapTypeId: google.maps.MapTypeId.ROADMAP
);

var myMarker = new google.maps.Marker(
  position: new google.maps.LatLng(18.103, 80.274),
  draggable: true
);

google.maps.event.addListener(myMarker, 'dragend', function(evt) 
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
);
google.maps.event.addListener(myMarker, 'dragstart', function(evt) 
  document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
);
map.setCenter(myMarker.position);
myMarker.setMap(map);

function getLocation() 
  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition);
   else 
    x.innerHTML = "Geolocation is not supported by this browser.";
  


function showPosition(position) 
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
  var myMarker = new google.maps.Marker(
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    draggable: true
  );
  google.maps.event.addListener(myMarker, 'dragend', function(evt) 
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
  );
  google.maps.event.addListener(myMarker, 'dragstart', function(evt) 
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
  );
  map.setCenter(myMarker.position);
  myMarker.setMap(map);

getLocation();

#map_canvas 
  width: 980px;
  height: 500px;


#current 
  padding-top: 25px;

<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
  <section>
    <div id='map_canvas'></div>
    <div id="current">
      <p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>
    </div>
  </section>


</body>

</html>

【讨论】：

虽然此代码可以回答问题，但提供有关其解决问题的方式和原因的信息可提高其长期价值。