Vue2 Google地图组件优化：地址搜索自动更新经纬度

以下是修改后的完整代码，我会标注关键改动点：

模板部分（Template） #

<template>
  <div class="map-container">
    <!-- 地址搜索输入框 -->
    <input
      ref="addressInput"
      v-model="address"
      placeholder="输入地址关键词"
      class="address-input"
    />

    <!-- 经纬度显示/输入字段 -->
    <div class="coordinate-fields">
      <label>纬度：</label>
      <input v-model.number="latitude" type="number" step="0.000001" />
      <label>经度：</label>
      <input v-model.number="longitude" type="number" step="0.000001" />
    </div>

    <!-- Google地图容器 -->
    <div ref="mapContainer" class="map"></div>
  </div>
</template>

脚本部分（Script） #

<script>
export default {
  name: 'GoogleMapTemplate',
  data() {
    return {
      address: '',
      latitude: null,
      longitude: null,
      map: null,
      marker: null,
      autocomplete: null // 新增：保存Autocomplete实例引用
    }
  },
  mounted() {
    // 初始化Google地图
    this.initMap()
    // 初始化地址自动补全
    this.initAutocomplete()
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new window.google.maps.Map(this.$refs.mapContainer, {
        center: { lat: 39.9042, lng: 116.4074 }, // 默认北京坐标
        zoom: 12
      })

      // 创建标记
      this.marker = new window.google.maps.Marker({
        map: this.map,
        draggable: true
      })

      // 保留原有的地图点击事件（可选，保留用户点击地图更新坐标的功能）
      this.map.addListener('click', (e) => {
        this.updateCoordinates(e.latLng.lat(), e.latLng.lng())
        this.address = '' // 点击地图时清空地址输入框
      })

      // 标记拖动结束后更新坐标（可选）
      this.marker.addListener('dragend', (e) => {
        this.updateCoordinates(e.latLng.lat(), e.latLng.lng())
      })
    },
    initAutocomplete() {
      // 初始化Autocomplete实例
      this.autocomplete = new window.google.maps.places.Autocomplete(
        this.$refs.addressInput,
        { types: ['geocode'] } // 只返回地理编码地址
      )

      // 关键改动：监听地址选中事件
      this.autocomplete.addListener('place_changed', () => {
        const place = this.autocomplete.getPlace()
        
        // 检查返回的地址是否包含经纬度
        if (!place.geometry || !place.geometry.location) {
          alert('无法获取该地址的坐标信息')
          return
        }

        // 获取选中地址的经纬度
        const lat = place.geometry.location.lat()
        const lng = place.geometry.location.lng()

        // 更新data中的经纬度字段
        this.updateCoordinates(lat, lng)

        // 更新地图视图到选中地址
        this.map.fitBounds(place.geometry.viewport)
        this.marker.setPosition(place.geometry.location)

        // 同步更新地址输入框的值（可选，避免手动输入和选中地址不一致）
        this.address = place.formatted_address
      })
    },
    // 封装更新坐标的方法，统一处理地图标记和data字段
    updateCoordinates(lat, lng) {
      this.latitude = lat
      this.longitude = lng
      this.marker.setPosition({ lat, lng })
    }
  }
}
</script>

样式部分（可选） #

<style scoped>
.map-container {
  padding: 20px;
}
.address-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
.coordinate-fields {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.coordinate-fields input {
  width: 150px;
  padding: 6px;
}
.map {
  width: 100%;
  height: 400px;
}
</style>

关键改动说明 #

1. 新增autocomplete实例引用：在data中定义autocomplete变量，用于保存Google地图Autocomplete实例，方便后续绑定事件。
2. 监听place_changed事件：在初始化Autocomplete时，添加place_changed事件监听，当用户选中地址建议时触发。
3. 提取并更新经纬度：从选中的place对象中获取geometry.location的经纬度，调用封装的updateCoordinates方法同步更新data中的latitude和longitude，同时更新地图标记位置。
4. 统一坐标更新逻辑：封装updateCoordinates方法，把地图标记更新和data字段更新放在一起，避免重复代码。

这样修改后，用户选中搜索建议的地址时，经纬度字段会自动同步更新，不需要再点击地图。

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