vue-amap 记录
(一)安装
npm install vue-amap –save
(二) 在高德开放平台申请需要的 key
注册完再打开控制台
-> 应用管理
-> 找到“+ 添加新 KEY”-> 点击会跳出这个弹框
提交之后,你就会看到自己的 key。
(三)在 main.js 中引入 vue-amap
// 引入 vue-amap
import AMap from ‘vue-amap’;
Vue.use(AMap);
// 初始化 vue-amap
AMap.initAMapApiLoader({
// 高德申请的 key
key:’YOUR_KEY’,
// 插件集合 (插件按需引入)
plugin:[‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’]
});
(四) 组件里调用高德地图
(1)基本使用:
需要注意:<el-map> 一定要设置宽高, 不然地图不会显示。或者给外面套一个 div, 给 div 设置宽高。
<template>
<div class="amap">
<el-amap vid="'amap-vue'"></el-amap>
</div>
</template>
使用 vue-amap 的定位组件时出现的问题:Get geolocation time out.Get ipLocation failed
(暂未找到解决方法)
生成二维码用微信打开后,也不能定位成功。
HTML5 获取当前位置
测试只有 IE 浏览器时可以的
// 若定位到城市即可满足需求,建议改用 Geolocation.getCityInfo 方法
o.getCityInfo((status,result)=>{
console.log(result);
});
(注:关于 vue-amap 的参考链接 https://blog.csdn.net/weixin_…