vue 高德地图 三维切换为二维

在Vue中使用高德地图进行三维与二维视图的切换，可以通过操作地图实例的setMapType方法来完成。以下是一个简单的示例：

首先确保安装并导入了高德地图的JavaScript API。

在Vue组件中，初始化高德地图，并创建地图实例。

使用一个方法来切换地图的视图模式。

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
  <button @click="toggleMapType">切换视图</button>
</template>

<script>
export default {
  name: 'GaodeMap',
  data() {
    return {
      map: null,
      mapType: '3D' // 默认为三维视图
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923] // 初始化地图中心点
      });
    },
    toggleMapType() {
      if (this.mapType === '3D') {
        this.map.setMapType('2D'); // 从三维视图切换到二维视图
        this.mapType = '2D';
      } else {
        this.map.setMapType('3D'); // 从二维视图切换到三维视图
        this.mapType = '3D';
      }
    }
  }
};
</script>

 

在这个示例中，我们首先在data中定义了一个变量mapType来记录当前的视图模式。在mounted钩子中初始化了高德地图。通过一个名为toggleMapType的方法来切换地图的视图模式，当按钮被点击时，会根据当前的视图模式切换到另一种模式。