在开发大屏中需要使用到高德地图，其中使用到的插件：
['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon']
点标记，绘制路线，信息窗体，icon
开发思路：
在开发中，因为多个途径点不确定数量，所以就放在一个数组中方便管理
起始点和路线配置不变，只是数据改变之后路线会改变，就生成地图的时候配置后只改动经纬度
车子根据客户需求一直改动大小，最后用了 AMap.Icon 可以设置大小
监听传入参数，判断是否有地图对象调用 this.setData() 和 this.init()
最后注销地图对象
beforeDestroy() {
// this.map.remove(this.line); // 清除覆盖物/图层
// 清除地图实例上的所有 click 事件绑定
this.map.clearEvents('click');
// 注销地图对象，并清空地图容器
this.map.destroy()
},
地图引入注册
import AMapLoader from '@amap/amap-jsapi-loader';
init() {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 14, //初始化地图级别
center: [121.373811, 31.26834], //初始化地图中心点位置
})
this.map.on('click', (e) => console.log(e));
this.addMarker() // 添加标记点
this.onabort() // 配置路线
this.infoWindowOpt() // 置弹窗
this.setData(this.vehicleGis || [], this.planGis || []) // 传入数据
}).catch(() => {
console.log("地图加载失败！");
});
},
根据后端返回的路径配置路线 Polyline（折线）
onabort() {
this.vehicleGisLine = new AMap.Polyline({
map: this.map,
// showDir: true, //是否延路径显示白色方向箭头,默认false
strokeOpacity: 1, //线透明度
strokeColor: "#00CC33", //线颜色
strokeWeight: 4, //线宽
lineJoin: 'round', // bevel 不起作用
});
this.planGisLine = new AMap.Polyline({
map: this.map,
strokeColor: '#95A4BA',
strokeOpacity: 1, //线透明度
strokeWeight: 4, //线宽
strokeStyle: 'dashed', //样式
});
// 缩放地图到合适的视野级别
// this.map.setFitView();
// this.map.remove(路线对象); // 清除路线
},
配置起始点 Marker 和 多个标记点
// 添加起始点和车子
addMarker() {
this.markerQ = new AMap.Marker({
map: this.map,
position: [121.373811, 31.26834],
clickable: false,
icon: require('@/assets/img/Q_icon.png'),
anchor: 'bottom-center',
})
this.marker = new AMap.Marker({
map: this.map,
zIndex: 12,
position: [121.373811, 31.26834],
// topWhenClick: false,
icon: new AMap.Icon({
image: require('@/assets/img/mhc.png'),
imageSize: [48, 24],
// imageSize: [36, 18],
}),
anchor: 'middle-left',
});
this.markerZ = new AMap.Marker({
map: this.map,
position: [121.373811, 31.26834],
// clickable: false,
icon: require('@/assets/img/z_icon.png'),
anchor: 'bottom-center',
});
this.marker.on('click', ({ lnglat }) => {
this.infoWindow.open(this.map, [lnglat.lng, lnglat.lat])
})
},
// 添加多个途径点
addMarkerCon() {
this.data.waypoints.forEach((m, i) => {
if (i !== this.data.waypoints.length - 1) {
const { clientLongitude, clientLatitude, clientName, clientAddr } = m
var marker = new AMap.Marker({
map: this.map,
position: [clientLongitude, clientLatitude],
icon: require('@/assets/img/c_icon.png'),
// anchor: 'middle-left',
offset: new AMap.Pixel(-13, -30),
});
marker.on('click', ({ lnglat }) => this.markerClick(lnglat, clientName, clientAddr));
// marker.emit('click', { target: marker });//默认初始化不出现信息窗体,打开初始化就出现信息窗体
this.markers.push(marker);
}
});
},
// 途径点和终点的信息窗体
markerClick({ lng, lat }, name, ads) {
const con = `<div><div style="font-size: 14px;font-weight: bold;color: #333;">${name || ""}</div><span style="font-size: 12px;color: #999;">${ads || ''}</span></div>`
this.infoWindowZ.setContent(con);
this.infoWindowZ.open(this.map, [lng, lat]);
// this.infoWindowZ.open(this.map, [lnglat.lng, lnglat.lat]);
},
View Code
配置窗体信息 InfoWindow
infoWindowOpt() {
const content = ``
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
closeWhenClickMap: true,//控制是否在鼠标点击地图后关闭信息窗体
anchor: 'middle-left',
content,
offset: new AMap.Pixel(42, -25),
});
this.infoWindowZ = new AMap.InfoWindow({
closeWhenClickMap: true,
content: '',
offset: new AMap.Pixel(0, -16),
});
// this.infoWindow.close(); // 关闭窗体
},
传入经纬度计算车子需要旋转的角度
/**
* 参数：
* fromPoint: [经度，纬度] ------ 起点
* toPoint ：[经度，纬度] ------ 终点
*
* 返回值：
* 0-360的角度值
**/
getAngle(fromPoint, toPoint) {
// 获取两点弧度
var radian = Math.atan2(toPoint[1] - fromPoint[1], toPoint[0] - fromPoint[0]);
// 转成角度
var angle = radian * 180 / Math.PI;
// 确保角度在0—360之间
//将负值转化为正值
if (angle < 0) angle += 360;
//将0-180的y为负的转化为180-360之间
if (toPoint[1] < fromPoint[1]) angle += 180;
//调整角度为arcgis的角度，即setAngle(角度)
if (angle >= 0 && angle <= 180) angle = 180 - angle;
else if (angle > 180 && angle <= 360) angle = 540 - angle;
else if (angle > 360) angle = angle % 360;
return Number(angle);
},
数据变动
setData(arr1, arr2) {
// 先把要改动的标记点清除干净，窗口关闭
this.infoWindow.close();
this.infoWindowZ.close();
if (this.markers.length) {
this.map.remove(this.markers);
this.markers = []
}
this.vehicleGisLine.setPath(arr1)
this.markerQ.setPosition(arr1[0])
if (arr2.length) { // 有规划路线
this.planGisLine.setPath(arr2)
this.markerZ.setPosition(arr2[arr2.length - 1])
this.marker.setPosition(arr2[0])
this.marker.setAngle(this.getAngle(arr2[0], arr2[1])) // 计算车子旋转角度
} else { // 没有规划路线，终点就是车子的位置。
this.markerZ.setPosition(arr1[arr1.length - 1])
this.marker.setPosition(arr1[arr1.length - 1])
this.marker.setAngle(this.getAngle(arr1[arr1.length - 2], arr1[arr1.length - 1]))
}
this.map.setCenter(arr1[arr1.length - 1], true)
this.map.setFitView();
const { clientName, clientAddr } = this.destination || {}
this.markerZ.on('click', ({ lnglat }) => this.markerClick(lnglat, clientName, clientAddr))
if (this.waypoints?.length > 1) {
this.addMarkerCon()
}
},
标签：web,vue,map,length,AMap,arr1,marker,new,高德 From： https://www.cnblogs.com/cielw/p/17409327.html