文章图片
注册高德地图：
【vue.js|在vue项目中引入高德地图】
文章图片
文章图片
文章图片
注册地址：高德控制台
vue中使用高德地图：
第一步：安装 npm install vue-amap --save
第二步：在assets文件中新建一个js文件AMap.js
AMap代码：
// 高德map
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src =
'http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=你获取到的key'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
vue代码：
#container{
width: 100%;
height: 100%;
}推荐阅读
- 前端html|Vue3调用高德地图
- UE4|[UE4 笔记]使用webbrowser获取网页图片原始大小(UE4获取Js相关信息的思路)
- apipost脚本使用讲解一~全局变量
- 【Vue2】nextTick
- web前端|为什么Web前端薪资如此高呢（总结了这4个原因）
- web前端|三款好用的前端代码编辑器推荐
- 前端面试题|【前端面试题】防抖与节流-js
- 前端|JavaScript 事件 -- 默认行为，限制范围拖拽
- 2022面试|前端基础（BFC）