javascript 如何在html文本框中显示谷歌地图api标记的纬度经度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18640181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display latitude longitude of google maps api marker in html text box
提问by user2751145
I have added a google map to my site that has a draggable marker. However I would like to display the latitude and longitude of the marker location in a text box below the google map as in this example:
我在我的网站上添加了一个带有可拖动标记的谷歌地图。但是，我想在谷歌地图下方的文本框中显示标记位置的纬度和经度，如下例所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps? file=api&v=2&key=examplekey"
type="text/javascript">
</script>
</head>
<body>
</h2><table>
<tr>
<td>
<div id="map" style="WIDTH: 700px; HEIGHT: 500px"><div></td></tr><tr><td>
<form action="http://formtoemailremote.com/user_forms.php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>
</td></tr></table>
<p>
</p>
<script type="text/javascript">
var map
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.centerAndZoom(new GPoint(-2.3, 49.35), 8);
map.setCenter(new GLatLng(49.461,-2.58),12);
map.enableDoubleClickZoom();
var icon = new GIcon();
var point=new GLatLng(49.461,-2.58);
var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true});
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});
</script>
</body>
</html>
I see that the connection between the marker and the text box is the id value
我看到标记和文本框之间的连接是id值
GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});
and
和
<form action="http://formtoemailremote.com/user_forms.php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>
but when I copy this in to my own code it doesn't work:
但是当我将其复制到我自己的代码中时，它不起作用：
<!DOCTYPE html>
<html>
<head>
<!--LOADING THE GOOGLE MAP APPLICATON PROGRAMMING INTERFACE-->
<script src="http://maps.googleapis.com/maps/api/js?key=insertkey&sensor=false">
</script>
<script>
// DEFINING NEW VARIABLE "MYCENTER"
var myCenter=new google.maps.LatLng(49.716,-2.196);
function initialize()
{
// DEFINING MAP PROPERTIES NOTICE CENTER USES PREDEFINED "MYCENTER"
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.HYBRID
};
//DEFINING NEW VARIABLE "MAP," A GOOGLE MAP BASED ON "MAPPROP"
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
// DEFINING NEW VARIABLE "MARKER" A DRAGGABLE MARKER POSITIONED AT "MYCENTER"
var marker=new google.maps.Marker({
position:myCenter,
draggable:true,
});
// PLACES THE MARKER ON THE GOOGLE MAP
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<form>
Lat/Long:<input type= "text" name = "gridbox" id = "grid"><br>
</form>
</body>
</html>
I notice the event code is "GEvent" in the example and "google.maps.event" in my own, which makes me think they are from two different versions of google maps api...
我注意到示例中的事件代码是“GEvent”，而我自己的事件代码是“google.maps.event”，这让我认为它们来自两个不同版本的谷歌地图 API...
I would appreciate it if someone could show me the correct coding or point me in the right direction.
如果有人可以向我展示正确的编码或为我指明正确的方向，我将不胜感激。
Note : I have deleted the API keys from the example and my own code. You'll have to insert your own to see what it looks like.
注意：我已经从示例和我自己的代码中删除了 API 密钥。你必须插入你自己的才能看到它的样子。
Thanks for reading!
谢谢阅读！
回答by davidkonrad
Okay, here is a working example you can copy / paste.
好的，这是一个可以复制/粘贴的工作示例。
Remember to include a correct
记得包含正确的
<script type="text/javascript" src="http://maps.googleapis.co ...
replace your code with this :
用这个替换你的代码：
<script>
var myCenter=new google.maps.LatLng(49.716,-2.196);
var marker;
function initialize() {
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker = new google.maps.Marker({
position:myCenter,
draggable:true,
});
marker.setMap(map);
google.maps.event.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.position.toUrlValue();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
that all there is to it.
这就是全部。
