vue 使用 高德地图,绘制折线,自定义marker 本地图标
<template><div :style="{width:'100%',height:'300px', border: '1px solid #e2e2e2'}"><el-amap vid="amap" class="amap-demo" :events="mapEvents" :center="center"><el-amap-marker v-for
·
<template>
<div :style="{width:'100%',height:'300px', border: '1px solid #e2e2e2'}">
<el-amap vid="amap" class="amap-demo" :events="mapEvents" :center="center">
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :key="index" :extData="marker"
:content="marker.icon">
</el-amap-marker>
<el-amap-polyline :path="polyline.path" strokeColor="#00A" strokeStyle="solid" strokeWeight="3">
</el-amap-polyline>
</el-amap>
</div>
</template>
data(){
return{
center: [116.403322, 39.920255],
markers: [],
polyline: {
path: [
[116.403322, 39.920255],
]
},
mapEvents: {
init(o) {
console.log(o)
o.setMapStyle('amap://styles/macaron');//自定义的高德地图的样式,我选的是马卡龙
},
// click(e) {
// let { lng, lat } = e.lnglat
// self.formData.longitude = lng
// self.formData.latitude = lat
// self.markers = [[lng, lat]]
// }
},
},
mounted() {
const id = this.$route.query.id
const load = this.$fns.loading()
var path = []
request.getDetail('workRecord/detail/' + id + '/motionTrack').then(({ object }) => {
load.close()
this.center = [object[0].longitude, object[0].latitude]
this.markers = [
{
position: [object[0].longitude, object[0].latitude],
icon: '<img src=" ' + require('@/assets/start_marker.png') + '" style="width:30px;height:35px;"></img>'
}, {
position: [object[object.length - 1].longitude, object[object.length - 1].latitude],
icon: '<img src=" ' + require('@/assets/end_marker.png') + '" style="width:30px;height:35px;"></img>'
}
]
object.map((item, i) => {
var u = [item.longitude, item.latitude]
path.push(u)
})
this.polyline.path = path
}).catch(() => {
load.close()
})
},
}
感谢作者:
https://www.jianshu.com/p/941956fbf08f
更多推荐
已为社区贡献3条内容
所有评论(0)