Google版本3地图地理编码器

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

08-15 16:08