谷歌api反向地理編碼

Question

我有我的網站谷歌地圖。用戶可以拖動標記，地圖將爲我輸入緯度和經度。見下面的代碼。我希望能夠從緯度和經度獲得地址，並將其放在我的表單「地址箱」中。

<script src="multi_step_form.js"></script> 

    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
    <script type="text/javascript"> 
    var map; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(49.25302534866034,-102.04825518471148); 
    var myOptions = { 
    zoom: 3, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var marker = new google.maps.Marker({ 
    draggable: true, 
    position: myLatlng, 
    map: map, 
    title: "Your location" 
    }); 
    google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = this.getPosition().lat(); 
    document.getElementById("lngbox").value = this.getPosition().lng(); 
    }); 
    } 
</script> 

我的代碼，另一位來查找我從https://203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/得到了地址，但我只是無法弄清楚如何將它們融合在一起。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

var geocoder = new google.maps.Geocoder(); 

var lat = "12.1234"; 

var long = "98.7654"; 

var latlng = new google.maps.LatLng(sLat, sLong); 

geocoder.geocode({"latLng":latlng},function(data,status){ 

if(status == google.maps.GeocoderStatus.OK){ 

var add = data[1].formatted_address; //this is the full address 

alert(add); 

for(var i=0; i<data[1].address_components.length; i++){ 

if(results[1].address_components[i].types[0] == "administrative_area_level_1"){ 

alert(results[1].address_components[i].short_name); 

} 

} 

} 

}) 

我的HTML形式如下

 <div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div> 
    <div id="latlong"> 
    <p><input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude"></p> 
    <p><input size="20" type="text" id="lngbox" name="lon" placeholder="Drag the marker on the map or type in the longitude"></p> 
    </div> 
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text" > 

任何幫助，將不勝感激

Answer 1

我建議要求在dragend事件偵聽器功能的反向地理編碼：

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = this.getPosition().lat(); 
    document.getElementById("lngbox").value = this.getPosition().lng(); 
    var latlng = this.getPosition(); 
    geocoder.geocode({ 
     "latLng": latlng 
    }, function (data, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var add = data[1].formatted_address; //this is the full address 
      // alert(add); 
      for (var i = 0; i < data[1].address_components.length; i++) { 
       if (data[1].address_components[i].types[0] == "administrative_area_level_1") { 
        document.getElementById('locationbox').value = data[1].address_components[i].short_name; 
       } 
      } 
     } 
    }); 
}); 

proof of concept fiddle

代碼片段：

var map; 
 

 
function initialize() { 
 
    var geocoder = new google.maps.Geocoder(); 
 
    var myLatlng = new google.maps.LatLng(49.25302534866034, -102.04825518471148); 
 
    var myOptions = { 
 
    zoom: 3, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    var marker = new google.maps.Marker({ 
 
    draggable: true, 
 
    position: myLatlng, 
 
    map: map, 
 
    title: "Your location" 
 
    }); 
 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
 
    document.getElementById("latbox").value = this.getPosition().lat(); 
 
    document.getElementById("lngbox").value = this.getPosition().lng(); 
 

 
    var latlng = this.getPosition(); 
 

 
    geocoder.geocode({ 
 
     "latLng": latlng 
 
    }, function(data, status) { 
 

 
     if (status == google.maps.GeocoderStatus.OK) { 
 

 
     var add = data[1].formatted_address; //this is the full address 
 

 
     // alert(add); 
 

 
     for (var i = 0; i < data[1].address_components.length; i++) { 
 

 
      if (data[1].address_components[i].types[0] == "administrative_area_level_1") { 
 

 
      document.getElementById('locationbox').value = data[1].address_components[i].short_name; 
 

 
      } 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div> 
 
<div id="latlong"> 
 
    <p> 
 
    <input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude"> 
 
    </p> 
 
    <p> 
 
    <input size="20" type="text" id="lngbox" name="lon" placeholder="Drag the marker on the map or type in the longitude"> 
 
    </p> 
 
</div> 
 
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text">