百度地图和高德地图的api我们在开发过程中会经常使用
今天呢,和大家聊一聊高德地图应该如何使用,地图类的应用场景有很多,比如大数据平台的地图展示,官网联系我们模块以及很多后台管理系统的坐标获取,打车类,电商类平台都会经常用到,对于,刚毕业或者刚工作的入门者来说,非常有必要学一学,练一练.
我还是从打开文档 - 注册账号获取密钥 - 使用api来为大家一一介绍
1.打开文档
搜索高德地图 左下角找到开放平台 2.注册账号,创建应用,拿到密钥 3.当我们创建好应用后,我们就可以看到key密钥了
此时,我们就可以打开文档,进行api的使用了
4.我们打开高德开放平台,找到文档 现在就可以制作我们想要的地图页面了
5.npm安装loader
npm i @amap/amap-jsapi-loader --save
此时,在我们的package.json文件中就可以看到我们安装的loader 6.现在准备一个vue文件
6.1.创建dom元素
<!-- 地图模块 -->
<div ></div>
6.2.引入该loader
import AMapLoader from '@amap/amap-jsapi-loader';
6.3初始化地图页面,并展示
methods:{
initMap(){
AMapLoader.load({
key:"您的密钥", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:18, //初始化地图级别
center:[108.718099,34.300293], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
},
mounted(){
this.initMap()
}
大功告成,这时,高德地图组件就会在页面显示出来了 学到了就点个赞图片和在看吧图片,建议收藏