drawPolyline() {
let colorList = [
"#c0392b",
"#e74c3c",
"#d35400",
"#e67e22",
"#f39c12",
"#f1c40f",
"#8e44ad",
"#9b59b6",
"#2980b9",
"#3498db",
"#27ae60",
"#2ecc71",
"#16a085",
"#1abc9c"
]
this.busPolyline = this.busPoint.map((item, index) => {
let polyLine = new AMap.Polyline({
map: this.map,
path: item.path,
title: item.name,
strokeColor: colorList[index],
strokeWeight: 4,
outlineColor: "#fff",
extData: {
color: colorList[index],
title: item.name,
desc: [item.busStation.join("→")],
img: []
}
})
return polyLine;
})
this.busPolyline.forEach(item => {
item.on('click', e => {
this.busPolyline.forEach(subItem => {
subItem.setOptions({
strokeColor: subItem.getExtData().color,
strokeWeight: 4,
outlineColor: "#fff",
isOutline: false
})
})
e.target.setOptions({
strokeColor: e.target.getExtData().color,
strokeWeight: 4,
outlineColor: "#fff",
borderWeight: 2,
isOutline: true
})
this.isDialogShow = false;
if (e.target.getExtData().desc === "") {
return
}
setTimeout(() => {
this.isDialogShow = true;
}, 500);
console.log(this.msgDetail);
this.msgDetail = e.target.getExtData();
this.map.setFitView(e.target)
})
})
},
drawPoint() {
let shape = type => {
return `<div class="svg-icon"><svg class="legend-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="48" ><g><path stroke-width="0" fill="${this.viewList.find(item => item.type == type).color}" d="M13.896,0C6.202,0,0,6.076,0,13.555C0,25.629,13.896,37.392,13.896,37.392s13.896,-11.997,13.896,-23.837C27.792,6.076,21.59,0,13.896,0z" /></g></svg><svg class="icon legend-icon" style="fill:${this.viewList.find(item => item.type == type).color};" aria-hidden="true"><use xlink:href="#${this.viewList.find(item => item.type == type).icon}"></use></svg></div>`}
this.mapMarkers = this.mapPoint.map((item, index) => new AMap.Marker({
content: shape(item.type),
position: item.coordinate,
map: this.map,
title: item.xmmc,
// offset: new AMap.Pixel(-15, -80),
extData: {
desc: item.desc,
type: item.type,
img: item.img,
title: item.xmmc
},
topWhenClick: true
}))
this.mapMarkers.forEach((item) => {
item.on('click', e => {
this.mapMarkers.forEach(item => {
item.setAnimation("AMAP_ANIMATION_NONE")
})
this.isDialogShow = false;
item.setAnimation("AMAP_ANIMATION_BOUNCE")
if (item.getExtData().desc === "") {
return
}
setTimeout(() => {
this.isDialogShow = true;
}, 500);
this.msgDetail = item.getExtData();
this.map.setZoomAndCenter(17, [item.C.position.lng, item.C.position.lat])
})
})
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。