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的方法来切换地图的视图模式,当按钮被点击时,会根据当前的视图模式切换到另一种模式。

posted @   鼓舞飞扬  阅读(388)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
历史上的今天:
2022-04-22 storage封装
2022-04-22 vue-devtools调试工具
点击右上角即可分享
微信分享提示