通过Google Maps Autocomplete获取经纬度并填充表单的技术求助

我明白你现在的需求——当用户通过Google Maps Autocomplete选中地址后，自动把对应的纬度（latitude）和经度（longitude）填充到指定字段里。你的现有代码已经实现了地址组件的填充，但缺少处理经纬度的部分，我来一步步帮你修改：

1. 先补上经纬度的输入字段 #

在你的视图代码里，需要添加两个用于存储经纬度的输入框（可以设置为只读，避免用户手动修改）：

<!-- 添加纬度和经度字段 -->
<div class="form-group col-md-2">
  <label class="label" for="latitude">Latitude</label>
  <input id="latitude" type="text" name="latitude" readonly>
</div>
<div class="form-group col-md-2">
  <label class="label" for="longitude">Longitude</label>
  <input id="longitude" type="text" name="longitude" readonly>
</div>

2. 修改Autocomplete的字段权限 #

你的现有代码只请求了address_component字段，而经纬度信息存储在geometry字段里，需要把它加入请求列表：

// 原代码：autocomplete.setFields(['address_component']);
// 修改后：
autocomplete.setFields(['address_component', 'geometry']);

3. 更新fillInAddress函数，添加经纬度填充逻辑 #

在fillInAddress函数里，当获取到选中的地址详情后，从place.geometry.location中提取经纬度，赋值给对应的输入框：

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // 原有地址组件填充逻辑保留
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }

  // 新增：填充经纬度
  if (place.geometry && place.geometry.location) {
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
  }
}

完整修改后的代码 #

脚本部分 #

var placeSearch, autocomplete;
var componentForm = {
 street_number: 'short_name',
 route: 'long_name',
 locality: 'long_name',
 administrative_area_level_1: 'short_name',
 country: 'long_name',
 postal_code: 'short_name'
};

function initAutocomplete() {
 autocomplete = new google.maps.places.Autocomplete(
 document.getElementById('autocomplete'), {types: ['geocode']});

 // 包含geometry字段以获取经纬度
 autocomplete.setFields(['address_component', 'geometry']);

 autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
 var place = autocomplete.getPlace();

 for (var component in componentForm) {
 document.getElementById(component).value = '';
 document.getElementById(component).disabled = false;
 }

 // 填充地址组件
 for (var i = 0; i < place.address_components.length; i++) {
 var addressType = place.address_components[i].types[0];
 if (componentForm[addressType]) {
 var val = place.address_components[i][componentForm[addressType]];
 document.getElementById(addressType).value = val;
 }
 }

 // 填充经纬度
 if (place.geometry && place.geometry.location) {
 document.getElementById('latitude').value = place.geometry.location.lat();
 document.getElementById('longitude').value = place.geometry.location.lng();
 }
}

function geolocate() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position) {
 var geolocation = {
 lat: position.coords.latitude,
 lng: position.coords.longitude
 };
 var circle = new google.maps.Circle(
 {center: geolocation, radius: position.coords.accuracy});
 autocomplete.setBounds(circle.getBounds());
 });
 }
}

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API&libraries=places&callback=initAutocomplete" async defer></script>

视图部分 #

<div class="form-group col-md-4" style="left: 10px;position: relative" id="locationField">
 <label class="label" for="jobs"> Address </label>
 <div class="input-group">
 <div class="input-group-addon" style="border-color: #bbb">
 <i class="icon-hotel-restaurant-235 u-line-icon-pro"></i>
 </div>
 <label class="input" style="height: 28px">
 <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" style="height: 33px" name="address"/>
 </label>
 </div>
</div>

<!-- 新增经纬度输入字段 -->
<div class="form-group col-md-2">
  <label class="label" for="latitude">Latitude</label>
  <input id="latitude" type="text" name="latitude" readonly>
</div>
<div class="form-group col-md-2">
  <label class="label" for="longitude">Longitude</label>
  <input id="longitude" type="text" name="longitude" readonly>
</div>

内容的提问来源于stack exchange，提问作者Andrei Mihail