盒子部分
樣式部分
.originImg {
width: 72rpx;
height: 100rpx;
img {
width: 100%;
height: 100%;
}
}
.origin-title {
font-size: 23rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #878a8c;
width: 100rpx;
position: absolute;
left: -8rpx;
}
script代碼部分
1.初始化一個script標簽，
init(id) {
this.$nextTick(() => {
var script = document.getElementById("mapTest");
let that = this;
script
? this.loop(id)
: (function () {
var script = document.createElement("script");
script.type = "text/Javascript";
script.setAttribute("id", "mapTest");
script.src =
"https://webapi.amap.com/maps?v=1.4.15&key=高德地圖中申請的key值&plugin=AMap.PlaceSearch";
document.body.appendChild(script);
that.loop(id);
})();
});
},
2.調用初始化地圖的方法
loop(id) {
try {
console.log("script1");
this.initMap(id);
} catch (e) {
console.log("script", e);
setTimeout(() => this.loop(id), 200);
}
},
3.初始化地圖
initMap(id) {
this.map = new AMap.Map("busContainer", {
zoom: 15,
center: [121.557053, 29.807482],
});
if (this.map) {
// 調用獲取公交軌跡數組方法
}
},
4.設置公交車點和軌跡圖
setMarkerAndPolyline(station_list, attraction_list) {
let t = this;
// 繪制旅游站點標記
attraction_list.forEach((item) => {
let markers1 = new AMap.Marker({
// 圖標尺寸
size: new AMap.Size(25, 34),
// 圖標的取圖地址
image:
"https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
// 圖標所用圖片大小
imageSize: new AMap.Size(135, 40),
position: [item.longitude, item.latitude],
// 圖標取圖偏移量
imageOffset: new AMap.Pixel(-9, -3),
});
this.map.add(markers1);
});
// 繪制公交站點標記
station_list.forEach((item) => {
let originImg =
"https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png";
let originCOntent= `
${item.name}`;
let markers1 = new AMap.Marker({
content: originContent,
position: [item.longitude, item.latitude],
offset: new AMap.Pixel(-20, -44),
});
this.map.add(markers1);
});
let polyline = null;
//處理軌跡數組
let polylineArr = station_list.map((item) => {
return [item.longitude, item.latitude];
});
// 繪制軌跡
if (polylineArr && polylineArr.length > 0) {
polyline = new AMap.Polyline({
map: t.map,
path: polylineArr,
showDir: true,
strokeColor: "#3e8af6", //線顏色
strokeWeight: 7, //線寬
lineJoin: "round", // 折線拐點連接處樣式
});
t.lineArr = polylineArr;
t.map.setFitView();
}
},