<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: "",//設(shè)置你自己的key對應(yīng)的密鑰
};
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: "", //設(shè)置你自己的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); // 獲取經(jīng)緯度
// 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);
});
},
//獲取駕車規(guī)劃
driverMap(AMap, KL, kT) {
// 默認從南京出發(fā)模擬 點擊為到達的地點
if(this.driving!=null){
this.driving.clear()// 判斷清除上一個路線規(guī)劃
}
this.map.plugin(["AMap.Driving"], async () => {
console.log("進來了嗎");
this.driving = new AMap.Driving({
// 駕車路線規(guī)劃策略尺铣,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME, // 其他策略 參考官網(wǎng) 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即是對應(yīng)的路線規(guī)劃方案
console.log(status, result);
});
});
},
// 信息窗體 根據(jù)經(jīng)緯度獲取地址信息
makInfo(AMap, KL, kT) {
// 信息窗體的內(nèi)容
var geocoder;
let res = "";
let that = this;
//加載地理編碼插件
this.map.plugin(["AMap.Geocoder"], function () {
//加載地理編碼插件
geocoder = new AMap.Geocoder({
radius: 1000, //以已知坐標為中心點隔躲,radius為半徑彰导,返回范圍內(nèi)興趣點和道路信息
extensions: "all", //返回地址描述以及附近興趣點和道路信息距辆,默認“base”
});
// //返回地理編碼結(jié)果
// 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);
});
});
},
// 點擊只出現(xiàn)單個標點
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 導致無法清除上一個標點和路線規(guī)劃