通过Google Maps API V3检索可拖动的图钉的纬度和经度 [英] Retrieve latitude and longitude of a draggable pin via Google Maps API V3
问题描述
这是我打算做的示例，但不是几个引脚，而是只有一个，它是可拖动的。问题是：我甚至无法显示初始点的坐标。当然，当用户移动插针时，我希望坐标在字段中也改变。
我希望我明确自己。我做错了什么？我应该使用地理编码服务吗？
这里是JS：
< script type =text / javascript> ;
var map;
函数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：您的位置
}）;
google.maps.event.addListener（marker，'click'，function（overlay，point）{
document.getElementById（latbox）。value = lat（）;
document.getElementById（lngbox）。value = lng（）;
}）;
}
< / script>
和HTML：
< HTML>
< body onload =initialize（）>
< div id =map_canvasstyle =width：50％; height：50％>< / div>
< div id =latlong>
< p>纬度：< input size =20type =textid =latboxname =lat>< / p>
< p>经度：< input size =20type =textid =lngboxname =lng>< / p>
< / div>
< / body>
< / html>
b
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屋！
