vue 使用高德地图 清除上一个标点和清除上一个路线规划
2022-07-18 本文已影响0人
_ou
<template>
<div class="home_div">
<div class="map_title">
<h3>JSAPI Vue2地图组件示例</h3>
</div>
<div id="container"></div>
<div id="tishi"></div>
</div>
</template>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "Mapview",
data() {
return {
map: null,
// marker:null
marker1: null,
marker2: null,
geocoder: null,
driving:null
};
},
created() {
window._AMapSecurityConfig = {
securityJsCode: "",//设置你自己的key对应的密钥
};
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: "", //设置你自己的key
version: "2.0",
plugins: [
"AMap.ToolBar",
"AMap.Driving",
"AMap.Geocoder",
"AMap.Driving",
],
AMapUI: {
version: "1.1",
plugins: [],
},
Loca: {
version: "2.0",
},
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 5,
zooms: [2, 22],
center: [105.602725, 37.076636],
});
this.map.on("click", (e) => {
console.log(e.lnglat.KL, e.lnglat.kT); // 获取经纬度
// this.makBro(AMap,e.lnglat.KL,e.lnglat.kT)
// this.makInfo(AMap, e.lnglat.KL, e.lnglat.kT);
this.driverMap(AMap, e.lnglat.KL, e.lnglat.kT);
});
this.map.on("dblclick", (e) => {
console.log("双击了", e);
this.maRemoveAll();
});
// let marker = new AMap.Marker({
// icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
// position: [116.405467, 39.907761]
// });
// let circle = new AMap.Circle({
// center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
// radius: 1000, //半径
// strokeColor: "#F33", //线颜色
// strokeOpacity: 1, //线透明度
// strokeWeight: 3, //线粗细度
// fillColor: "#ee2200", //填充颜色
// fillOpacity: 0.35 //填充透明度
// });
// this.map.add(circle)
// this.map.setFitView()
})
.catch((e) => {
console.log(e);
});
},
//获取驾车规划
driverMap(AMap, KL, kT) {
// 默认从南京出发模拟 点击为到达的地点
if(this.driving!=null){
this.driving.clear()// 判断清除上一个路线规划
}
this.map.plugin(["AMap.Driving"], async () => {
console.log("进来了吗");
this.driving = new AMap.Driving({
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME, // 其他策略 参考官网 https://lbs.amap.com/api/jsapi-v2/documentation#drivingpolicy
map: this.map,
panel: "tishi",
});
var startLngLat = [118.78631875000013, 32.04950317647876]; // 开始地点
var endLngLat = [KL, kT]; // 目的地点
this.driving.search(startLngLat, endLngLat, function (status, result) {
// 未出错时，result即是对应的路线规划方案
console.log(status, result);
});
});
},
// 信息窗体 根据经纬度获取地址信息
makInfo(AMap, KL, kT) {
// 信息窗体的内容
var geocoder;
let res = "";
let that = this;
//加载地理编码插件
this.map.plugin(["AMap.Geocoder"], function () {
//加载地理编码插件
geocoder = new AMap.Geocoder({
radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
extensions: "all", //返回地址描述以及附近兴趣点和道路信息，默认“base”
});
// //返回地理编码结果
// geocoder.on("complete", (geocoderDate)=>{
// console.log("data",geocoderDate);
// });
//逆地理编码
geocoder.getAddress([KL, kT], (status, result) => {
console.log("e:", status, result);
res = result.regeocode.formattedAddress;
console.log(res);
var content = [
// "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
// "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
"电话 : 010-84107000 邮编 : 100102",
`地址 :</div>${res}</div>`,
];
var infoWindow = new AMap.InfoWindow({
content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
});
infoWindow.open(that.map, [KL, kT]);
infoWindow.open(that.map);
});
});
},
// 点击只出现单个标点
makBro(AMap, KL, kT) { //
if (this.marker1 == null) {
if (this.marker2 != null) {
this.map.remove([this.marker2]);
this.marker2 = null;
}
this.marker1 = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
offset: new AMap.Pixel(-10, -30),
position: [KL, kT],
});
this.map.add(this.marker1);
this.map.setFitView();
} else {
this.map.remove([this.marker1]);
this.marker1 = null;
this.marker2 = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
offset: new AMap.Pixel(-10, -30),
position: [KL, kT],
});
this.map.add(this.marker2);
this.map.setFitView();
}
},
maRemoveAll() {
// AMap.remove()
// console.log(this.marker);
// this.map.remove([this.marker]);
},
},
};
.home_div {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: relative;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: absolute;
}
.map_title {
position: absolute;
z-index: 1;
width: 100%;
height: 50px;
background-color: rgba(27, 25, 27, 0.884);
}
h3 {
position: absolute;
left: 10px;
z-index: 2;
color: white;
}
#tishi {
width: 30%;
height: 50%;
overflow: scroll;
position: relative;
top: 10%;
}
我遇到的原因是没有使用在data里面第定义和使用 而是使用var 或者 let 导致无法清除上一个标点和路线规划
