盒子部分
<view style="width: 100%; height: 100%" id="busContainer"> </view>
样式部分
.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 = `<div class="flex-j-c"><div class="originImg"><img src="${originImg}"></div></div><div class="origin-title">${item.name}</div>`;
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();
}
},
