如何從 Google 版本地圖中的拖動標記中獲取格式化地址

Question

我制作了一個 Google 地圖，可以讓您在文本字段中輸入地址。 然后它會導航到您在文本字段中輸入的地址，並留下一個可拖動的標記，拖動時會顯示緯度和經度以及地理定位地址。

我不想顯示上面的地址，而是希望當您拖動標記以在底角顯示標記的地址而不是文本字段中輸入的地址。

我嘗試了很多方法都無濟於事。 lonlat[0].formatted_address 是我嘗試過的一些東西之一。

我從谷歌得到了我的參考

我的代碼如下：

<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

});
   // 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>

Answer 1

您需要使用反向地理編碼服務（如您鏈接到的示例中所示）來檢索格式化的地址。

該示例中的此代碼調用反向地理編碼器並使用響應顯示其返回的 formatted_address：

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.');
    }
  });
}

這是調用它的 dragend 偵聽器：

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });

這是一個工作示例（將從反向地理編碼器收到的地址放入信息窗口）

代碼片段：

 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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 版本地圖中的拖動標記中獲取格式化地址

問題描述

1 個解決方案

解決方案1
46 已采納 2012-10-10 22:21:29

如何從 Google 版本地圖中的拖動標記中獲取格式化地址

問題描述

1 個解決方案

解決方案1 46 已采納 2012-10-10 22:21:29

解決方案1
46 已采納 2012-10-10 22:21:29