[英]How to display latitude longitude of google maps api marker in html text box
我已經在我的網站上添加了帶有可拖動標記的google map。 但是我想在谷歌地圖下面的文本框中顯示標記位置的緯度和經度,如下例所示:
<!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>
我看到標記和文本框之間的連接是id值
GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});
和
<form action="http://formtoemailremote.com/user_forms.php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>
但是當我將其復制到我自己的代碼中時,它不起作用:
<!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>
我注意到示例中的事件代碼是“ GEvent”,而我自己的事件代碼是“ google.maps.event”,這使我認為它們來自兩個不同版本的google maps API。
如果有人可以向我顯示正確的編碼或為我指明正確的方向,我將不勝感激。
注意:我已經從示例和我自己的代碼中刪除了API密鑰。 您必須插入自己的外觀才能看到。
謝謝閱讀!
好的,這是一個可以復制/粘貼的工作示例。
記住要包括正確的
<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>
這就是全部。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.