javascript - 如何在 JavaScript 中使用 Google Map 填充输入字段后填充纬度和经度

Question

我正在使用 Google Map API 使用 JavaScript 将自动完成数据获取到输入字段中。我在下面提供我的代码。

<input type="text" class="form-control" id="pick_addr" name="pick_addr" required="required" tabindex="2" placeholder="Enter pick up address" ng-model="pick_addr" autocomplete="off">
<input type="hidden" class="form-control" id="src_lat" name="src_lat" required="required" tabindex="2" ng-model="src_lat">
<input type="hidden" class="form-control" id="src_lon" name="src_lon" required="required" tabindex="2" ng-model="src_lon">

<script>
function initMap() {
   var input = document.getElementById('pick_addr');
   var autocomplete = new google.maps.places.Autocomplete(input);
}
</script>

在这里，我可以使用 Google Map API 成功获取自动完成数据，但是当该字段具有自动完成数据时，我需要将相应的纬度和经度提取到两个隐藏字段。

标签： javascriptgoogle-maps

Answer 1

要获取地点结果的纬度和经度，请将此代码放入place_changed回调函数中（当用户选择地点时触发）

document.getElementById("src_lat").value = place.geometry.location.lat();
document.getElementById("src_lon").value = place.geometry.location.lng();

function initMap() {
  var input = document.getElementById('pick_addr');
  var autocomplete = new google.maps.places.Autocomplete(input);


  // Set the data fields to return when the user selects a place.
  autocomplete.setFields(
    ['address_components', 'geometry', 'icon', 'name']);
  autocomplete.addListener('place_changed', function() {

    var place = autocomplete.getPlace();
    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    document.getElementById("src_lat").value = place.geometry.location.lat();
    document.getElementById("src_lon").value = place.geometry.location.lng();
  });
}

<input type="text" class="form-control" id="pick_addr" name="pick_addr" required="required" tabindex="2" placeholder="Enter pick up address" ng-model="pick_addr" autocomplete="off">
<input class="form-control" id="src_lat" name="src_lat" required="required" tabindex="2" ng-model="src_lat">
<input class="form-control" id="src_lon" name="src_lon" required="required" tabindex="2" ng-model="src_lon">

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>