如何在Google版本地图中从拖动的标记中获取格式化的地址 [英] How to get the formatted address from a dragged marker in Google Version Maps
本文介绍了如何在Google版本地图中从拖动的标记中获取格式化的地址的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了Google地图，可让您将地址输入到文本字段中。然后，它会将您导航到您在文本字段中输入的地址，并留下一个可拖动的标记，以便在拖动时显示纬度和长度以及地理位置地址。
我不是显示上面的地址，而是当您拖动标记来显示标记的地址，而不是从文本输入的地址字段。
我尝试了很多方法无济于事。 lonlat [0] .formatted_address是我尝试过的一些东西。
我从 Google
我的代码如下：
< 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
}）;
// 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（当前正在拖动标记...< / p>';
}）;
$ b $ {
document.getElementById（'current'）。innerHTML ='< p> b google.maps.event.addListener（marker，'dragend'，function（evt）{
document.getElementById（'info'）。innerHTM L ='< p>地址：'+ results [0] .formatted_address +'< / p>';
}）;
google.maps.event.addListener（marker，'dragstart'，function（evt）{
document.getElementById（'info'）。innerHTML ='< p>当前拖动标记...< / p>';
}）;
map.setCenter（marker.position）;
marker.setMap（map）;
$ b} else {
alert（地理编码不成功，原因如下：+ 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 id =currentstyle =background-color：white;> Nothing yet ...< / div>
< div id =infostyle =background-color：white;>地址：< / div>
< / div>
< / div>
< div id =map_canvas>< / div>
< / body>
< / html>
解决方案
您需要使用反向地理编码服务在这个例子中你链接到）来检索格式化地址。
这个例子中的代码调用反向地理编码器并使用响应来显示它返回的formatted_address ：
$ b $
函数geocodePosition（pos）{
geocoder.geocode（{
latLng：pos $ b $ （响应&&;响应长度> 0）{
updateMarkerAddress（响应[0] .formatted_address）;
} else {
updateMarkerAddress（'Can not determine address at this location。'）;
}
}）;
$ / code> 这是调用它的dragend侦听器：
google.maps.event.addListener（marker，'dragend'，function（）{
updateMarkerStatus（'Drag ended'）;
geocodePosition（marker.getPosition（））;
}）;
这是一个工作示例（将从反向地理编码器收到的地址放入infowindow中）
代码段：
var geocoder; var map; var marker; var infowindow = new google.maps.InfoWindow（{size：new google.maps.Size 150）;}）; function initialize（）{geocoder = new google.maps.Geocoder（）; var latlng = new google.maps.LatLng（-34.397,150.644）; var mapOptions = {zoom：8，center：latlng，mapTypeId：google.maps.MapTypeId.ROADMAP} map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）; google.maps.event.addListener（map，'click'，function（）{infowindow.close（）;}）;} function geocodePosition（pos）{geocoder.geocode {{latLng：pos}，function（responses）{if （response&& response.length> 0）{marker.formatted_address = responses [0] .formatted_address;} else {marker.formatted_address ='无法确定此位置的地址';} infowindow.setContent（marker.formatted_address +< br>坐标：+ marker.getPosition（）。toUrlValue（6））; infowindow.open（map，marker）;}）;} function codeAddress（）{var address = document.getElementById（'address' ）。值; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{map.setCenter（results [0] .geometry.location）; if（marker ）{marker.setMap（null）; if（infowindow）infowindow.close（）;} marker = new google.maps.Marker（{map：map，draggable：true，position：results [0] .geometry.location}） ; google.maps.event.addListener（marker，'dragend'，function（）{geocodePosition（marker.getPosition（））;}）; google.maps.event.addListener（marker，'click'，function（）{if （marker.formatted_address）{infowindow.setContent（marker.formatted_address +< br> coordinates：+ marker.getPosition（）。toUrlValue（6））;} else {infowindow.setContent（address +< br> coordinate ：+ marker.getPosition（）。toUrlValue（6））;} infowindow.open（map，marker）;}）; google.maps.event.trigger（marker，'click'）;}其他{alert（'由于以下原因，Geocode不成功：+状态）; }}）;} google.maps.event.addDomListener（window，load，initialize）;
html，body {height：100％;保证金：0; padding：0;}＃map_canvas {height：100％;} @ media print {html，body {height：auto; } #map_canvas {height：650px; }}
< script src =https：// maps.googleapis.com/maps/api/js\"></script><div> < input id =addresstype =textboxvalue =Sydney，NSW> < input type =buttonvalue =Geocodeonclick =codeAddress（）>< / div>< div id =map_canvasstyle =height：90％; top：30px><< ; / div>
I have made a Google map that lets you input an address into a text field. It then navigates you to the address that you entered into the text field and leaves a draggable marker that when dragged shows you the Lat and Long and The Geolocated Address.
I instead of displaying the above address, would like when you drag the marker to display in the bottom corner the Address of the Marker and the not the inputted address from the text field.
I have tried a number of methods to no avail. lonlat[0].formatted_address was amongst some of the things i tried.
I got my reference from Google
My code is below:
<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
});
// 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>';
});
google.maps.event.addListener(marker, 'dragend', function(evt){
document.getElementById('info').innerHTML = '<p>Address: ' + results[0].formatted_address + '</p>';
});
google.maps.event.addListener(marker, 'dragstart', function(evt){
document.getElementById('info').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(marker.position);
marker.setMap(map);
} 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 id="current" style="background-color:white;">Nothing yet...</div>
<div id="info" style="background-color:white;">Address:</div>
</div>
</div>
<div id="map_canvas"></div>
</body>
</html>
解决方案
You need to use the reverse geocoding service (as demonstrated in the example you link to) to retrieve the formatted address.
This code from that example calls the reverse geocoder and uses the response to display the formatted_address that is returned by it:
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
This is the dragend listener that calls it:
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
Here is a working example (puts the address received from the reverse geocoder in the infowindow)
code snippet:
var geocoder;
var map;
var marker;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
marker.formatted_address = responses[0].formatted_address;
} else {
marker.formatted_address = 'Cannot determine address at this location.';
}
infowindow.setContent(marker.formatted_address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
});
}
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);
if (marker) {
marker.setMap(null);
if (infowindow) infowindow.close();
}
marker = new google.maps.Marker({
map: map,
draggable: true,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'click', function() {
if (marker.formatted_address) {
infowindow.setContent(marker.formatted_address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
} else {
infowindow.setContent(address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
}
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
@media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:90%;top:30px"></div>
这篇关于如何在Google版本地图中从拖动的标记中获取格式化的地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
