vue 实现百度地图切换城市

要在 Vue 中实现百度地图切换城市，你需要使用百度地图 JavaScript API。以下是一个简单的示例：

首先，在你的 Vue 组件中引入百度地图 JavaScript API：

<script src="//api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>

接下来，在 Vue 组件的 `mounted` 钩子函数中初始化地图：

mounted() {
  const map = new BMap.Map('map-container')
  this.map = map // 将地图对象保存在组件实例中

  // 设置地图中心点和缩放级别
  const point = new BMap.Point(this.lng, this.lat)
  map.centerAndZoom(point, this.zoom)

  // 添加城市选择控件
  const size = new BMap.Size(70, 20)
  map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: size,
    // 切换城市时触发的回调函数
    onChangeBefore: (function() {
      // 隐藏信息窗口
      this.infoWindow && this.infoWindow.close()
    }).bind(this),
    // 切换城市完成后触发的回调函数
    onChangeAfter: (function(city) {
      // 更新组件中的城市信息
      this.city = city.name
      this.lng = city.center.lng
      this.lat = city.center.lat
      // 移动地图中心点
      const point = new BMap.Point(this.lng, this.lat)
      this.map.setCenter(point)
    }).bind(this)
  }))
}

注意，在上面的代码中，`this.lng`、`this.lat` 和 `this.zoom` 是组件中的数据属性，用于控制地图的中心点和缩放级别。`this.city` 也是组件中的数据属性，用于显示当前选择的城市。

最后，在你的 Vue 模板中添加一个容器来显示地图：

<template>
  <div>
    <div id="map-container" style="height: 500px;"></div>
    <p>当前城市：{{ city }}</p>
  </div>
</template>

这样，当用户在城市选择控件中切换城市时，地图的中心点会随之改变，同时组件中的城市信息也会更新。