高德地图API开发总结
高德jsAPI https://lbs.amap.com/api/jsapi-v2/documentation#markereventdblclick
高德功能演示地址https://lbs.amap.com/demo/jsapi-v2/example/calcutation/path-length
高德开发文档https://lbs.amap.com/api/javascript-api/reference/overlay#marker
首先安装对应依赖
npm i @amap/amap-jsapi-loader --save引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "4cd09561e22bd40a4e982dd7950e00e4"//高德账号中的keycode,2022后引入高德地图不仅需要秘钥,还需要对证的安全秘钥
};//创建关键变量
data() {
return {
//构建地图
map: null,
//第一个为center-船只位置,之后的都为路径点,最重要的一个东西，只要把这个提交后台该有的都有,该数组为自行创建,高德地图的删除秒点后自动连线太复杂了,需要自己存一个
path: [
[113.27, 23.13],
[113.324969, 23.153362],
[113.354495, 23.128737]
], //路径,,二级数组,记录每一个点
//点标记集合,存marker的
markerList: [],
//你的连线记录
polylines: [],
}
生命周期事件
mounted() {
this.initMap();
},
//离开页面时候自动销毁地图
beforeDestroy() {
this.map && this.map.destroy();
console.log("地图已销毁");
}, methods:{
--------------------------生成一个地图------------------------
initMap() {
AMapLoader.load({
key: "bb3725fc219e182369e3f95eb01e0164", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Scale"
// "AMap.HawkEye",//小地图
// "AMap.MapType"
// "AMap.Geolocation"//自我定位,获取手机当前位置
] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then(AMap => {
this.map = new AMap.Map("container", {
//设置地图容器id
// viewMode: "3D", //是否为3D地图模式\2D
viewMode: "3D",
zoom: 12, //初始化地图级别
center: [113.27, 23.13] //初始化地图中心点位置
});
// 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
size: new AMap.Size(50, 60), // 图标尺寸
image: require("../../assets/image/boot_icon.png"), // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
});
//创建一个标记点
var marker = new AMap.Marker({
position: new AMap.LngLat(113.27, 23.13), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "高番", //鼠标滑过标记点展示的文字'
icon: icon,
clickable: true,
offset: new AMap.Pixel(-15, -30) // 图像相对展示区域的偏移量，适于雪碧图等
// image: require("")
});
//---------------------重置连线,已封装成方法---------------------------
this.line();
//点击地图触发事件,给地图添加绑定的事件
this.map.on("click", this.addpointFn);
})
}
//-------------------------给地图添加的描点事件-----------------------
addpointFn(e) {
//添加瞄点
console.log(e);
console.log(e.lnglat.getLng()); //获取点击的精度
console.log(e.lnglat.getLat()); //获取点击的纬度
let lng = e.lnglat.getLng();
let lat = e.lnglat.getLat();
//创建一个标记点
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "高番", //鼠标滑过标记点展示的文字'
clickable: true,
// image: require("../../assets/image/boot_icon.png") // Icon的图像
icon: require("../../assets/image/mark_bs.png"),
// offset: Pixel(-10, -20)
offset: new AMap.Pixel(-12, -30) // 图像相对展示区域的偏移量，适于雪碧图等
});
//添加标记点事件,给每一个点绑定一个删除事件
let _this = this;
marker.on("click", function() {
// _this.path.splice(_this.path.indexOf([lng, lat]), 1);
_this.map.remove(marker);
_this.markerList.splice(_this.markerList.indexOf(marker), 1);
console.log("path_____删除前______");
console.log(_this.path);
//二维坐标不能直接比较值,需要拆开
_this.path.forEach((item, index) => {
if (item[0] == lng && item[1] == lat) {
console.log(_this.path[_this.path.length - 1]);
console.log([lng, lat]);
// console.log(_this.path[_this.path.length - 1] == [lng, lat]);
_this.path.splice(index, 1);
}
});
console.log("path_____删除后______");
console.log(_this.path);
//清空点后,出发重新连线逻辑
_this.resetLine();
});
//添加标记点
this.map.add(marker);
this.markerList.push(marker);
//地图添加轨迹
var polyline = new AMap.Polyline({
// path: [
// [113.27, 23.13],
// [lng, lat]
// ],
path: [this.path[this.path.length - 1], [lng, lat]],
strokeColor: "#F56C6C",
strokeWeight: 5,
strokeOpacity: 0.6,
fillOpacity: 0,
fillColor: "#E6A23C",
showDir: true, //轨迹箭头标记
zIndex: 50
});
this.polylines.push(polyline); //保存每一个生成的折线
polyline.setMap(this.map);
//将大部分全部的瞄点添加到瞄点数组中,
this.path.push([lng, lat]);
this.getpathLength();
},
//----------------刚进入页面后的第一次连线---------------------
//和重新连线不同的是1、不需要清理地图.2、不能绑定事件自己本身
//第一次连线
line() {
console.log("触发连线");
//把原来这个项目本身的点全部连起来
if (this.path.length > 1) {
//从第0个开始连线
let beforPath = this.path[0];
this.path.forEach((item, index) => {
var polyline = new AMap.Polyline({
// path: [
// [113.27, 23.13],
// [lng, lat]
// ],
path: [beforPath, item],
strokeColor: "#F56C6C",
strokeWeight: 5,
strokeOpacity: 0.6,
fillOpacity: 0,
fillColor: "#E6A23C",
showDir: true, //轨迹箭头标记
zIndex: 50
});
//创建一个标记点
var marker = new AMap.Marker({
position: new AMap.LngLat(item[0], item[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "高番", //鼠标滑过标记点展示的文字'
clickable: true,
// icon: require("../../assets/image/mark_bs.png")
// icon: icon
// image: require("")
icon: require("../../assets/image/mark_bs.png"),
// offset: Pixel(-10, -20)
offset: new AMap.Pixel(-12, -30) // 图像相对展示区域的偏移量，适于雪碧图等
// imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
});
let lng = item[0];
let lat = item[1];
//添加标记点事件,给每一个点绑定一个删除事件
let _this = this;
marker.on("click", function() {
// _this.path.splice(_this.path.indexOf([lng, lat]), 1);
_this.map.remove(marker);
_this.markerList.splice(_this.markerList.indexOf(marker), 1);
console.log("path_____删除前______");
console.log(_this.path);
//二维坐标不能直接比较值,需要拆开
_this.path.forEach((item, index) => {
if (item[0] == lng && item[1] == lat) {
console.log(_this.path[_this.path.length - 1]);
console.log([lng, lat]);
// console.log(_this.path[_this.path.length - 1] == [lng, lat]);
_this.path.splice(index, 1);
}
});
console.log("path_____删除后______");
console.log(_this.path);
_this.resetLine();
});
//添加标记点
this.map.add(marker);
this.markerList.push(marker);
this.polylines.push(polyline); //保存每一个生成的折线
polyline.setMap(this.map);
//上一个点
beforPath = item;
});
}
//计算连线距离
this.getpathLength();
},
//---------------重连线---------------
//删除点的情况下 进行两条线的重新连接
resetLine() {
console.log("触发重新连线");
//把原来这个项目本身的点全部连起来
//清除所有的标记点开始重新标记
this.map.clearMap();
if (this.path.length >= 1) {
//从第0个开始连线
let beforPath = this.path[0];
this.path.forEach((item, index) => {
var polyline = new AMap.Polyline({
path: [beforPath, item],
strokeColor: "#F56C6C",
strokeWeight: 5,
strokeOpacity: 0.6,
fillOpacity: 0,
fillColor: "#E6A23C",
showDir: true, //轨迹箭头标记
zIndex: 50
});
//创建一个标记点
var marker = new AMap.Marker({
position: new AMap.LngLat(item[0], item[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "高番", //鼠标滑过标记点展示的文字'
clickable: true,
// image: require("")
icon: require("../../assets/image/mark_bs.png"),
// offset: Pixel(-10, -20)
offset: new AMap.Pixel(-12, -30) // 图像相对展示区域的偏移量，适于雪碧图等
});
//添加标记点事件
let lng = item[0];
let lat = item[1];
let _this = this;
marker.on("click", function() {
// _this.path.splice(_this.path.indexOf([lng, lat]), 1);
_this.map.remove(marker);
_this.markerList.splice(_this.markerList.indexOf(marker), 1);
console.log("path_____删除前______");
console.log(_this.path);
//二维坐标不能直接比较值,需要拆开
_this.path.forEach((item, index) => {
if (item[0] == lng && item[1] == lat) {
console.log(_this.path[_this.path.length - 1]);
console.log([lng, lat]);
// console.log(_this.path[_this.path.length - 1] == [lng, lat]);
_this.path.splice(index, 1);
}
});
console.log("path_____删除后______");
console.log(_this.path);
_this.resetLine();
});
// 既然是删除其中的一个点就没必要重新瞄点了,否则右键会执行删除+重新瞄点导致重复
// this.markerList.push(marker);
console.log("mapmap");
console.log(this.map);
// this.map.remove(this.polylines[this.polylines.length - 1]);
this.map.add(marker);
polyline.setMap(this.map); // 让新旧两个点相连
this.polylines.push(polyline); //保存每一个生成的折线
//上一个点
beforPath = item;
});
}
//计算连线距离
this.getpathLength();
},
//计算长度
getpathLength() {
var arr = new Array(); //经纬度坐标数组
this.path.forEach((item, index) => {
arr.push(new AMap.LngLat(item[0], item[1]));
});
var distance = Math.round(AMap.GeometryUtil.distanceOfLine(arr));
console.log(distance);
// alert(distance);
this.distanceKM = (distance / 1000).toFixed(2);
}
}
难点总结
this.map+连线实现自动删除,再自动连接非常麻烦
因为要动态记录坐标点本身,坐标连线,和坐标点的坐标.而且要让他们一一对应起来
往往是当你删除了一个点后,无法删除它与上一个点的连线,或者你下一次描点的时候,无法从最近新增的一个描点出发amap.remove(marker)也经常出问题
因此,每次添加删除点的时候,本地记录已有的点坐标是否必要
二维数组不能使用indexof和include进行判断,只能进行循环或者tostring再判断
这样我们只需要本地存下每一个描点的坐标
等更新删除描点后
执行:清除所有地图上的标识=>将清除和新增记录到本地的描点坐标中=>将新增了的描点坐标组传给地图,重新生成描点及连线
Comments | NOTHING