Google版本3地图地理编码器，点击或拖动标记时获取标记图层的坐标

本文介绍了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&amp;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>

解决方案

如果你把它放在正确的地方：

（在回调例程中，标记是本地的）

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&amp;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地图地理编码器，点击或拖动标记时获取标记图层的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！