我制作了带有可拖动标记的Google Maps地图。用户拖动标记时,我需要知道新的纬度和经度,但是我不知道这样做的最佳方法是什么。
如何获取新坐标?
Answers:
这是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,我们就会在您的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);
如果您对我的回答有任何疑问,请告诉我。
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
可以在Google Maps API-LatLng中找到更多信息。
marker
在调用方法之前如何实例化?例如,我正在查看developers.google.com/maps/documentation/javascript/examples/…,并且在完成搜索并显示标记后,如何获得该标记的纬度/经度?
你可以只调用getPosition()
的Marker
-你试过吗?
如果你是JavaScript API的弃用,V2,你可以叫getLatLng()
上GMarker
。
getPosition()
返回一个对象,因此要专门获取纬度/经度,您必须分别调用lat()
和lng()
。
试试这个
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();
});
// 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 );
您应该在标记上添加一个侦听器,并监听drag或dragend事件,并在接收到该事件时询问该事件的位置。
有关标记触发的事件的描述,请参见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。
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>