前言：

因为项目需要引入高德地图的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>

vue-cli3.0引入高德地图3d效果两种方法+实例+填坑

前言：

因为项目需要引入高德地图的3d效果，找了很多资料，在这里记录下方法和实例组件

***注意：

因为两个方法代码量都特别大，这里分2个页面详细说一下，方法一是链接出去专门说，最下面有更多资料，高德3d官网地址和别的资料地址

方法一：使用官方案例，这里提供两个实例，一个是vue-cli3.0使用，一个是直接用html引入实现效果

详细demo入口：https://blog.csdn.net/qq_41619796/article/details/102968589

方法二：使用vue-amap来实现，这个方法在这里详细说一下

实现效果：

实现步骤：

1、安装：

2、单个组件使用配置：

3、js中配置方法：

4、页面调用部分：

实现完整组件：gd_timeT_map.vue ***温馨提示：安装完直接加载就可以看到效果

更多资料：

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效果两种方法+实例+填坑相关推荐

最新文章

热门文章