vue集成高德地图amap-jsapi-loader的实现
作者：一只小可乐吖
本文主要介绍了vue集成高德地图amap-jsapi-loader的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前往高德地图开发平台高德开放平台 | 高德地图API
一：申请高德key
去高德官网去创建一个属于自己的地图应用 （得到key和秘钥） 。
首先，我们要注册一个开发者账号，根据实际情况填写，身份写个人：
进入我的应用：
创建新应用
获取key和密钥
注意： 2021年12月02日后创建的 key 必须配备安全密钥一起使用
二：在vue中使用高德地图
这里使用的是amap-jsapi-loader 。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API，并提供了一些方便的配置选项和回调函数，以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库，如React、Vue、Angular等。
在项目中应用：
1、控制台安装：
npm i amap-jsapi-loader --save
2、在main.js中配置秘钥
//配置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '你的密钥' //* 安全密钥
}3、项目中创建MapView.vue文件用作地图组件
4、在 MapView.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 map；
<div class="content">
<!-- 用来显示地图 -->
<!-- 可以不写宽度，但一定要有高度 -->
<div id="Map" style="height: 500px;">
</div>
</div>5、在地图组件 MapView.vue 中引入 amap-jsapi-loader
import AMapLoader from '@amap/amap-jsapi-loader';
6、地图初始化函数 initMap，这里简单实现了marker点标记功能
<script>
//引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: 'IndexMap',
data() {
return {
map: null, //地图实例
markerdom: null,
marker: [],
markernum: [
[108.925107, 34.238578],
[108.977807, 34.240636],
[108.977893, 34.20508],
[108.915065, 34.202951],
[108.920713, 34.226592],
......
//为了展示，用的写好的数据
]
}
},
mounted() {
this.initMap();//调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用
},
methods: {
initMap() {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
//2.0版本太卡了 ，所以使用的1.4.0版本 其插件也有不同 如：ToolBar
version: "1.4.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
resizeEnable: true,
plugins: [
"AMap.ToolBar", //工具条
"AMap.Scale", // 比例尺
"AMap.Geolocation", //定位
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
console.log(AMap);
this.map = new AMap.Map("Map", { //设置地图容器id
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 15,
pitch: 80,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
buildingAnimation: true,//楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 20],
center: [108.946651, 34.222718], //初始化地图中心点位置
});
this.markerdom = '' +
'<div class="custom-content-marker">' +
' <img src="/icon_bike.png">' +
'</div>';
for (let i = 0; i < this.markernum.length; i++) {
this.marker.push(new AMap.Marker({
position: new AMap.LngLat(this.markernum[i][0], this.markernum[i][1]),// Marker经纬度
content: this.markerdom, // 将 html 传给 content
offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
}));
}
this.map.add(this.marker)
console.log(this.marker);
}).catch(e => {
console.log(e);
})
}
}
}
</script>看一下效果：
到此这篇关于vue集成高德地图amap-jsapi-loader的实现的文章就介绍到这了,更多相关vue集成高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！