前言:
因为项目需要引入高德地图的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({
// 高德的key
key: '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({
// 高德的key
key: '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 更加详细的大神地址