嘿，我来帮你搞定这个需求！要实现下拉选城市然后在Google地图上定位展示的功能，咱们可以一步步调整你的代码，下面是完整的实现方案：

1. 完善城市数据（添加经纬度） #

Google地图需要经纬度才能精确定位，所以先给每个城市补充坐标信息：

cities: [
  {id: 1, name: "Manchester", lat: 53.4808, lng: -2.2426},
  {id: 2, name: "London", lat: 51.5074, lng: -0.1278},
  {id: 3, name: "Liverpool", lat: 53.4084, lng: -2.9916},
  {id: 4, name: "Leicester", lat: 52.6309, lng: -1.1398},
  {id: 5, name: "Southampton", lat: 50.9097, lng: -1.4044}
]

2. 引入Google Maps JavaScript API #

在你的HTML入口文件（比如index.html）里引入Google地图的API，记得替换成你自己的API密钥：

<script src="https://maps.googleapis.com/maps/api/js?key=你的专属API密钥&libraries=places"></script>

3. 修改Vue组件，整合地图功能 #

咱们更新组件的模板、数据和方法，实现地图初始化和选中城市后的实时定位：

模板部分 #

<div id="app">
  <select v-model="selectedCityId">
    <option v-for="city in cities" :value="city.id">{{city.name}}</option>
  </select>
  <h4>Selected city: {{getSelectedCityName()}}</h4>
  <!-- 地图容器必须设置宽高，否则无法显示 -->
  <div id="map" style="width: 600px; height: 400px; margin-top: 20px;"></div>
</div>

脚本部分 #

new Vue({
  el: '#app',
  data: {
    cities: [
      {id: 1, name: "Manchester", lat: 53.4808, lng: -2.2426},
      {id: 2, name: "London", lat: 51.5074, lng: -0.1278},
      {id: 3, name: "Liverpool", lat: 53.4084, lng: -2.9916},
      {id: 4, name: "Leicester", lat: 52.6309, lng: -1.1398},
      {id: 5, name: "Southampton", lat: 50.9097, lng: -1.4044}
    ],
    selectedCityId: "",
    map: null,
    marker: null
  },
  methods: {
    // 获取选中的城市名称
    getSelectedCityName() {
      const targetCity = this.cities.find(city => city.id === this.selectedCityId);
      return targetCity ? targetCity.name : "";
    },
    // 初始化地图
    initMap() {
      // 默认定位到伦敦，你也可以改成其他默认城市
      const defaultCity = this.cities.find(city => city.id === 2);
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: defaultCity.lat, lng: defaultCity.lng},
        zoom: 10
      });
      // 添加地图标记
      this.marker = new google.maps.Marker({
        position: {lat: defaultCity.lat, lng: defaultCity.lng},
        map: this.map,
        title: defaultCity.name
      });
    },
    // 更新地图定位
    updateMap() {
      if (!this.selectedCityId) return;
      const targetCity = this.cities.find(city => city.id === this.selectedCityId);
      // 移动地图中心到选中城市
      this.map.setCenter({lat: targetCity.lat, lng: targetCity.lng});
      // 更新标记位置
      this.marker.setPosition({lat: targetCity.lat, lng: targetCity.lng});
      this.marker.setTitle(targetCity.name);
    }
  },
  mounted() {
    // 组件挂载完成后初始化地图
    this.initMap();
  },
  watch: {
    // 监听选中城市变化，实时更新地图
    selectedCityId() {
      this.updateMap();
    }
  }
});

关键细节说明 #

• 把原来的selectedCity改成了selectedCityId，更清晰地绑定城市ID，方便后续查找对应坐标
• 地图容器必须设置宽高样式，否则Google地图会因为没有尺寸而无法渲染
• 使用watch监听选中城市的变化，一旦切换就触发地图更新
• 添加了地图标记（Marker），让定位位置更直观
• 默认初始化时定位到伦敦，你可以根据需求修改默认值或者处理未选中的情况

注意事项 #

• 你需要去Google Cloud Platform申请自己的API密钥，并且启用Maps JavaScript API
• 确保API密钥没有设置错误的权限限制，否则地图可能加载失败

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