Javascript 如何在html文本框中显示google maps api标记的经纬度_Javascript_Google Maps_Google Maps Markers

Javascript 如何在html文本框中显示google maps api标记的经纬度

javascript google-maps

Javascript 如何在html文本框中显示google maps api标记的经纬度,javascript,google-maps,google-maps-markers,Javascript,Google Maps,Google Maps Markers,我在我的网站上添加了一个谷歌地图，上面有一个可拖动的标记。但是，我希望在google地图下方的文本框中显示标记位置的纬度和经度，如本例所示： <!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"> &

我在我的网站上添加了一个谷歌地图，上面有一个可拖动的标记。但是，我希望在google地图下方的文本框中显示标记位置的纬度和经度，如本例所示：

<!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&amp;v=2&amp;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>

及


横向/纵向：

但当我将其复制到自己的代码中时，它不起作用：

<!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>


//定义新变量“MYCENTER”
var myCenter=newgoogle.maps.LatLng（49.716，-2.196）；
函数初始化（）
{
//定义地图属性通知中心使用预定义的“MYCENTER”
var mapProp={
中心：迈森特，
缩放：13，
mapTypeId:google.maps.mapTypeId.HYBRID
};
//定义新变量“MAP”，一个基于“MAPPROP”的谷歌地图
var map=new google.maps.map（document.getElementById（“谷歌地图”）
，mapProp）；
//定义新变量“MARKER”位于“MYCENTER”的可拖动标记
var marker=new google.maps.marker({
职位：迈森特，
真的，
});
//将标记放置在谷歌地图上
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
google.maps.event.addListener（标记“拖动”，函数（）{
document.getElementById（“grid”）.value=marker.getPoint（）.toUrlValue（）；}）；
横向/纵向：

我注意到示例中的事件代码是“GEvent”，我自己的是“google.maps.event”，这让我觉得它们来自两个不同版本的谷歌地图api

如果有人能告诉我正确的编码或给我指出正确的方向，我将不胜感激

注意：我已经从示例和我自己的代码中删除了API键。您必须插入自己的，才能看到它是什么样子

谢谢你的阅读

好的，下面是一个可以复制/粘贴的工作示例

请记住包含一个正确的

<script type="text/javascript" src="http://maps.googleapis.co ...

啊，好的，谢谢。我理解第三个代码块，但不理解第二个。要将marker声明为一个全局变量，我不是要省去“var”吗？否则我该怎么做？否-var xxx
是声明本身。如果在初始化中执行var marker
，实际上是重新声明标记！如果你这样做了，那也不会有什么坏处——不过，在这种情况下，你根本没有一个全局标记可以覆盖！我已经定义了新变量“MYCENTER”var MYCENTER=NEW google.maps.LatLng（49.716，-2.196）；var标记

和

marker=new google.maps.marker（{position:myCenter，draggable:true，}）但是我仍然没有看到标记的纬度和经度坐标出现在文本框中？我已经用完整的功能代码更新了答案。您应该尝试学习更多关于javascript的知识，无意冒犯：）当您将代码建立在网络上发现的低质量脚本上时，您经常会遇到这样的问题。
<!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>

<script type="text/javascript" src="http://maps.googleapis.co ...

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