Google版本3地图地理编码器，点击或拖动标记时获取标记图层的坐标 [英] Google Version 3 Maps Geocoder, Get Coordinates of marker layer when clicking or dragging marker
本文介绍了Google版本3地图地理编码器，点击或拖动标记时获取标记图层的坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了Google Version 3 Geocoder，我希望能够在拖动或点击标记时获取标记的坐标。以下是我的代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：地理编码简单< / title>
< link href =http://code.google.com/apis/maps/documentation/javascript/examples/default.css =stylesheettype =text / css/>
< script src =http://maps.google.com/maps/api/js?v=3.5&sensor=false>< / script>
< script type =text / javascript>
var geocoder;
var map;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
函数codeAddress（）{
var address = document.getElementById（address）。value;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
draggable：true，
position：results [0] .geometry.location
））;
} else {
alert（由于以下原因，Geocode不成功：+ status）;
}
}）;
}
< / script>
< style type =text / css>
#controls {
position：absolute;
bottom：1em;
left：100px;
width：400px;
z-index：20000;
填充：0 0.5em 0.5em 0.5em;
}
html，body，#map_canvas {
margin：0;
宽度：100％;
身高：100％;
}
< / style>
< / head>
< body onload =initialize（）>
< div id =controls>
< input id =addresstype =textboxvalue =Sydney，NSW>
< input type =buttonvalue =Geocodeonclick =codeAddress（）>
< / div>
< div id =map_canvas>< / div>
< / body>
< / html>
我试过使用下面的代码来做到这一点，但它似乎不起作用。 p>
// Javascript //
google.maps.event.addListener（marker，'dragend'，function（evt）{
document.getElementById（'current'）。innerHTML ='< p> Marker dropped：当前Lat：'+ evt.latLng.lat（）。toFixed（3）+'Current Lng：'+ evt.latLng .lng（）。toFixed（3）+'< / p>';
}）;
google.maps.event.addListener（marker，'dragstart'，function（evt）{
document.getElementById（'current'）。innerHTML ='< p>当前拖动标记...< / p>';
}）;
map.setCenter（marker.position）;
marker.setMap（map）;
// HTML //
< div id ='map_canvas'>< / div>
< div id =current> Nothing yet ...< / div>
解决方案
如果你把它放在正确的地方：
http：//www.geocodezip .com / BlakeLoizides_geocode.html
（在回调例程中，标记是本地的）
I have made a Google Version 3 Geocoder , I want to be able to pick up the coordinates of the marker when it is dragged or clicked. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<style type="text/css">
#controls {
position: absolute;
bottom: 1em;
left: 100px;
width: 400px;
z-index: 20000;
padding: 0 0.5em 0.5em 0.5em;
}
html, body, #map_canvas {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="controls">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>
</body>
</html>
I have tried to use the following code to do this but it does not seem to work.
// Javascript//
google.maps.event.addListener(marker, '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(marker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(marker.position);
marker.setMap(map);
//HTML//
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
解决方案
That code works just fine if you put it in the correct place:
http://www.geocodezip.com/BlakeLoizides_geocode.html
(inside the callback routine, the marker is local to it)
这篇关于Google版本3地图地理编码器，点击或拖动标记时获取标记图层的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
