失眠网 > Vue+高德地图API的使用(插件的使用)

Vue+高德地图API的使用(插件的使用)

时间：2024-08-20 13:22:11

接上次地图显示

官方文档：根据自己需求引入想要的插件

在AMapLoader.load中的plugins引入你所需要的插件

//这里是我引入的插件plugins: ["AMap.ToolBar", //工具条"AMap.Scale", // 比例尺"AMap.Geolocation", //定位"AMap.HawkEye", //鹰眼，显示缩略图"AMap.MapType", //图层切换，用于几个常用图层切换显示], // 需要使用的的插件列表

官方文档：AMap.ToolBar 的参数方法及事件

在AMapLoader.load中.then里面

//在地图上显示工具条方法this.map.addControl(new AMap.ToolBar({ //toolBar//这里可以添加自己想要的参数，上面有官方文档的链接position: 'LT', // 默认位置：LT:左上角;autoPosition: true, //是否自动定位默认为falselocate: false, //是否显示定位按钮，默认为 true})); // 工具条

效果图：

接着将其他插件也引进来

定位我是把他放入geolocation，再addControl添加到地图里面，这里同时要在data里面添加geolocation:null,

this.map.addControl(new AMap.Scale()); // 比例尺 this.map.addControl(new AMap.OverView()); // 鹰眼 this.map.addControl(new AMap.MapType()); // 图层切换 this.geolocation = new AMap.Geolocation({ //定位enableHighAccuracy: true, //是否使用高精度定位，默认:trueconvert: true, //自动偏移坐标为高德坐标，默认：truetimeout: 5000, //超过5秒后停止定位，默认：无穷大buttonPosition: 'RB', //定位按钮停靠位置showMarker: false, //定位成功在位置显示点标记，默认：true})this.map.addControl(this.geolocation); //在地图上引入定位插件

效果图：

定位的方法

//定位的方法获取用户当前的精确位置信息this.geolocation.getCurrentPosition((status, result) => {console.log('定位getCurrentPosition', status, result);if (status == 'complete') {console.log('定位信息', result);} else {console.log('定位出错', result);}});

控制台

Chrome、火狐以及部分套壳浏览器会定位失败。

官方文档有说 https 在这些浏览器还是能够定位的

Edge浏览器是可以实现定位。

这是在Chrome定位失败返回的结果：

注：

官方文档也分为1.4.0跟2.0

官方文档2.0版本

官方文档1.4.0 现在是1.4.15版本

2.0版本

OverView改成HawkEye//鹰眼

// "AMap.OverView", //鹰眼，显示缩略图"AMap.HawkEye", //鹰眼，显示缩略图 2.0//.then中// this.map.addControl(new AMap.OverView()); // 鹰眼 this.map.addControl(new AMap.HawkEye()); // 鹰眼 2.0