前言：

? ? ? ? 因為項目需要引入高德地圖的3d效果，找了很多資料，在這里記錄下方法和實例組件

***注意：

因為兩個方法代碼量都特別大，這里分2個頁面詳細說一下，方法一是鏈接出去專門說，最下面有更多資料，高德3d官網地址和別的資料地址

方法一：使用官方案例，這里提供兩個實例，一個是vue-cli3.0使用，一個是直接用html引入實現效果

效果：

詳細demo入口：https://blog.csdn.net/qq_41619796/article/details/102968589

?

方法二：使用vue-amap來實現，這個方法在這里詳細說一下

實現效果：

實現步驟：

1、安裝：

npm i vue-amap

2、單個組件使用配置：

***注意：我在main.js中配置了，不是VueAMap這個方法報錯，就是initAMapApiLoader這個初始化方法報錯，只能放在單獨組件這里才能生效，目前尚未找到原因

import Vue from 'vue' import VueAMap from 'vue-amap' Vue.use(VueAMap)

3、js中配置方法：

created() {this.initMapData();},methods: {initMapData(){VueAMap.initAMapApiLoader({// 高德的keykey: '6e891db894fab1a0cc515f88857e47fd',// 插件集合plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],uiVersion: '1.0.11', // 版本號resizeEnable: true,rotateEnable:true,pitchEnable:true,zoom: 17,pitch:80,rotation:-15,viewMode:'3D',//開啟3D視圖,默認為關閉buildingAnimation:true,//樓塊出現是否帶動畫expandZoomRange:true,zooms:[3,20],center:[116.333926,39.997245]})}}

4、頁面調用部分：

<el-amap vid="amapDemo"></el-amap>

實現完整組件：gd_timeT_map.vue? ***溫馨提示：安裝完直接加載就可以看到效果

<template><div class="mapDiv"><el-amap vid="amapDemo"></el-amap></div> </template><script> import Vue from 'vue' import VueAMap from 'vue-amap' Vue.use(VueAMap) export default {props: {},data () {return {};},components: {},computed: {},created() {this.initMapData();},mounted() {},methods: {initMapData(){VueAMap.initAMapApiLoader({// 高德的keykey: '6e891db894fab1a0cc515f88857e47fd',// 插件集合plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],uiVersion: '1.0.11', // 版本號resizeEnable: true,rotateEnable:true,pitchEnable:true,zoom: 17,pitch:80,rotation:-15,viewMode:'3D',//開啟3D視圖,默認為關閉buildingAnimation:true,//樓塊出現是否帶動畫expandZoomRange:true,zooms:[3,20],center:[116.333926,39.997245]})}},watch: {} }</script> <style lang='less' scoped>.mapDiv{width:100%;height: 500px;} </style>

更多資料：

1、https://lbs.amap.com/api/javascript-api/example/3d/map3d? ?高德3d官網

2、https://blog.csdn.net/qq_24147051/article/details/84763265? 另一個使用vue-amap?更加詳細的大神地址

?

總結

以上是生活随笔為你收集整理的vue-cli3.0引入高德地图3d效果两种方法+实例+填坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。