vue 高德地图点击城市列表定位

要实现点击城市列表定位功能，可以使用高德地图 JavaScript API 的 `setCity()` 方法。具体实现步骤如下：

1. 在 Vue 组件中引入高德地图 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API_KEY"></script>

2. 在 `mounted()` 生命周期中初始化地图，并将地图实例保存到组件实例中：

mounted() {
  // 初始化地图
  const map = new AMap.Map('mapContainer', {
    zoom: 10,
    center: [116.397428, 39.90923]
  })
  
  // 将地图实例保存到组件实例中
  this.map = map
}

3. 在城市列表中添加点击事件处理函数，当用户点击城市列表中的某个城市时，调用 `setCity()` 方法，并将城市名称作为参数传入：

handleCityClick(city) {
  // 调用 setCity() 方法设置地图中心点为指定城市
  this.map.setCity(city)
}

注意，`setCity()` 方法只能在地图加载完成后调用，否则会报错。因此，如果需要在组件初始化时就设置地图中心点为某个城市，可以将 `setCity()` 方法放在 `mounted()` 生命周期中的回调函数中，如下所示：

mounted() {
  // 初始化地图
  const map = new AMap.Map('mapContainer', {
    zoom: 10
  })

  // 在地图加载完成后调用 setCity() 方法设置地图中心点为指定城市
  map.on('complete', () => {
    map.setCity('北京市')
  })

  // 将地图实例保存到组件实例中
  this.map = map
}