从Google标记获取纬度/经度


89

我制作了带有可拖动标记的Google Maps地图。用户拖动标记时,我需要知道新的纬度和经度,但是我不知道这样做的最佳方法是什么。

如何获取新坐标?

Answers:


132

这是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;
}

这是我们初始化Google地图的初始JavaScript。我们创建一个要拖动的标记,并将其draggable属性设置为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是在拖动标记时设置div 的内容,然后在拖动停止时设置标记的纬度和经度。Google鼠标事件具有属性名称“ latlng”,该属性在事件触发时返回“ google.maps.LatLng”对象。因此,我们在这里所做的基本上是使用此侦听器的标识符,该标识符由传回,google.maps.event.addListener并获取属性latLng以提取Dragend的当前位置。拖动停止后,一旦获得了Lat Lng,我们就会在您的currentdiv中显示:

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);

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


3
太好了!我有一个带有自动完成地址输入字段以及可拖动标记的地图。如果有人使用输入字段,我还需要显示纬度长坐标。有一个简单的解决方案吗?
柯克·罗斯


31

你可以只调用getPosition()Marker -你试过吗?

如果你是JavaScript API的弃用,V2,你可以叫getLatLng()GMarker


我认为我的困惑是何时调用getPosition()-是否必须将其添加到构造函数中,以便它知道在移动标记时要求输入坐标?
Genadinik 2011年

@Genadinik我在编辑中链接到的示例可能会有所帮助;它显示了如何为拖动事件附加侦听器,您可以在其中查询标记的位置并根据需要使用它。
no.good.at.coding

很好,如果我要将坐标存储在会话或数据库中,是否应该通过AJAX调用来完成?还是有更简单的方法?
Genadinik

我想不出任何比带有标记ID及其当前坐标的Ajax快速帖子更简单的方法:)但是您可以考虑批量更新或至少等待几秒钟,直到完成拖动后看到用户没有开始更多的拖动操作,以便在标记被拖动的过程中不会将请求淹没在服务器上-可以说,直到位置稳定为止。当然,这取决于与客户端看到的相比,您可以承受的服务器端状态有多远。
no.good.at.coding

1
getPosition()返回一个对象,因此要专门获取纬度/经度,您必须分别调用lat()lng()
杰夫·普基特

20

试试这个

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 );


2

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

-3

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

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

1
我想你的意思marker.position.lat()marker.position.lng()
杰夫·帕克特

或者你需要使用marker.getPosition().lat()marker.getPosition().lng()
塞尔吉奥·雷斯

您不能使用“ long”作为变量
Dinith
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.