vue-amap记录
(一)安装
npm install vue-amap --save
(二)在高德开放平台申请需要的key

注册完再打开控制台
->应用管理
->找到“+添加新KEY”
->点击会跳出这个弹框

clipboard.png
提交之后,你就会看到自己的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

clipboard.png

(暂未找到解决方法)
生成二维码用微信打开后,也不能定位成功。
HTML5获取当前位置
测试只有IE浏览器时可以的
//若定位到城市即可满足需求,建议改用Geolocation.getCityInfo方法
o.getCityInfo((status,result)=>{
console.log(result);
});
(注:关于vue-amap的参考链接https://blog.csdn.net/weixin_...


zs_staria
36 声望12 粉丝

月光啊,闪爆他们~ ~


引用和评论

0 条评论