google api反向地理編碼

Question

我的網站上有谷歌地圖。 用戶可以拖動標記，地圖會將緯度和經度輸入到我的表單中。 請參閱下面的代碼。 我希望能夠從緯度和經度獲取地址並將其放入我的“locationbox”表單中。

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

概念證明小提琴

代碼片段：

 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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">