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

接上次地图显示

---

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

在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, //是否自动定位  默认为false
	locate: 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, //是否使用高精度定位，默认:true
	convert: true, //自动偏移坐标 为高德坐标，默认：true
	timeout: 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

2.0版本插件的模样也不一样

我使用2.0版本会非常卡 ，不知道是电脑原因还是其他