在这里插入图片描述

<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

Logo

前往低代码交流专区

更多推荐