小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
前言
佛祖保佑, 永无bug
。Hello 大家好!我是海的对岸!
因我司在尝试三维地图
方面的摸索,所以,我这边尝试下用高德地图加载三维地图
,特此记录一下
开干,解决过程
因为我是vue
开发
首先,需要引入vue-amap
,Vue
引入vue-amap
,看这边,传送门
上篇讲到,vue-amap文档显示不全
,需要把vue-amap的文档下载下来,本地跑起来看
,怎么本地跑vue-amp文档
,看我上一篇写的vue-amap 官方文档显示不全【解决】
步骤1
还需要用到高德地图开发者平台
上的高德地图文档
,传送门
我们打开高德在线调试界面
步骤2
再看vue-amap
看到这里,你会发现,图例让你使用vue-amap
的时候,避免使用AMap
这个名字,因为这个名字是原生高德SDK
的,说明AMap
这个在vue项目
里面,已经是存在的了
因为我们开发,定制化可能会比较多,使用上会更加贴近原生高德SDK
。
由于地图实例是异步加载的,当使用地图的页面开始加载地图的时候地图还没完成初始化,会造成获取不到地图实例
直接上代码
<template>
<div class="amap-page-container">
<div id="amap-demo1" class="amap-demo">
</div>
</div>
</template>
<script>
// NPM 方式
import { lazyAMapApiLoaderInstance } from 'vue-amap';
const loadPromise = lazyAMapApiLoaderInstance.load();
export default {
data() {
return {
map: null
}
},
methods: {
initMap() {
loadPromise.then(() => {
console.log('-----');
this.map = new AMap.Map('amap-demo1', {
center: [120.55538, 31.87532], // 以张家港为例
zoom: 12,
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
pitch:80,
rotation:-15,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[3,20],
});
});
}
},
mounted() {
this.initMap();
},
}
</script>
<style scoped>
.amap-demo {
height: 98vh;
width: 100%;
resize:both;
}
</style>
路由里配置下
效果如下
评论抽奖
欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边
- 抽奖礼物:100份,掘金官方提供,包括掘金徽章、拖鞋、马克杯、帆布袋等,随机发放
- 抽奖时间:「掘力星计划」活动结束后,预计3个工作日内,官方将在所有符合规则的活动文章评论区抽出
- 抽奖方式:掘金官方随机抽奖+人工核实
- 评论内容:与文章内容相关的评论、建议、讨论等,「踩踩」「学习了」等泛泛类的评论无法获奖
都看到这里了,求各位观众大佬们点个赞再走吧,你的赞对我非常重要