高德地图 vue 动态切换 viewMode

可以使用高德地图JavaScript API中的setMapStyle方法来动态切换viewMode。具体步骤如下：

1. 在mounted钩子中，初始化地图并将地图实例挂载到Vue实例上：

mounted() {
  const map = new AMap.Map('mapContainer', {
    zoom: 10,
    center: [116.39,39.9],
    viewMode:'3D', // 初始视图模式为3D
    expandZoomRange:true
  });
  this.map = map;
}

2. 在Vue实例中，定义一个方法来切换viewMode：

methods: {
  switchViewMode() {
    const map = this.map;
    const viewMode = map.get('viewMode');
    if (viewMode === '3D') {
      map.setMapStyle('amap://styles/normal'); // 切换为2D
    } else {
      map.setMapStyle('amap://styles/whitesmoke'); // 切换为卫星图
    }
  }
}

3. 在模板中，使用一个按钮来触发切换viewMode的方法：

<template>
  <div>
    <div id="mapContainer"></div>
    <button @click="switchViewMode">切换视图模式</button>
  </div>
</template>