logo标签列表

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

javascriptgoogle-mapsgoogle-maps-markers
97

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

如何检索新的坐标？

8个回答
142

这里是JSFiddle示例。在Google Maps API V3中，跟踪可拖动标记的纬度和经度非常简单。让我们以以下HTML和CSS为基础。

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

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

#current{
     padding-top: 25px;
}

以下是我们最初的 JavaScript 代码，用于初始化 Google 地图。我们创建了一个标记并将其可拖动属性设置为 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来附加这些事件。我们所做的是在标记被拖动时设置

current 的内容，然后在停止拖动时设置标记的经纬度。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);

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

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

更多信息可在Google Maps API - LatLng找到。

在调用它的方法之前，如何实例化“marker”？例如，我正在查看https://developers.google.com/maps/documentation/javascript/examples/places-searchbox，在完成搜索并出现标记后，如何获取该标记的纬度/经度？ - user1063287
32
我认为我的困惑点在于何时调用getPosition()函数 - 我是否需要将其添加到构造函数中，以便在标记移动时知道要请求坐标？ - Genadinik
@Genadinik 我在编辑中提供的示例可能会有所帮助；它展示了如何附加一个拖动事件监听器，您可以查询标记的位置并根据需要使用它。 - no.good.at.coding
哦，好的。如果我想要在 session 或者数据库中储存这些坐标，我应该通过 AJAX 调用来实现吗？还是有更简单的方法？ - Genadinik
我想不出比使用标记ID和其当前坐标进行快速Ajax提交更简单的方法了 :) 但是您可以考虑批量更新或者至少等待几秒钟，直到拖动完成并且用户不再开始任何其他拖动，以便在标记正在被拖动的过程中不会向服务器发送请求 - 等待位置稳定，就是这样。当然，这取决于您的服务器端状态与客户端看到的状态相差多少是可以接受的。 - no.good.at.coding
1
getPosition() 返回一个对象，因此要获取纬度/经度，您需要分别从中调用 lat() 和 lng()。 - Jeff Puckett
22

试试这个

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();
});
8
// 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 );
3

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>

1
虽然这段代码可能回答了问题，但提供解决问题的方式和原因可以提高其长期价值。 - L_J
2
-3

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

var lat = marker.lat();
var long = marker.lng();
1
我想你的意思是marker.position.lat()和marker.position.lng()。 - Jeff Puckett
或者您需要使用 marker.getPosition().lat() 和 marker.getPosition().lng()。 - Sergio Reis
你不能将“long”作为一个变量。 - Dinith
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接