Vue2中使用高德地图marker和轨迹显示

近期在做的项目中要求使用高德地图显示车辆轨迹，需求内容比较简单。因为是初次接触地图在项目中的使用。特此发文记录一下，防止忘记。

首先看一下目前做的效果图：
下面我将分步展示实现方法：
（1）引入高德地图
这里我采用的是静态引入的方式，将高德地图的cdn静态链接引入到public文件夹中的index.html中即可。示例如下：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=“这里是你申请的key”&plugin=AMap.MouseTool&plugin=AMap.Geocoder&plugin=AMap.MarkerClusterer&plugin=AMap.Geolocation&plugin=AMap.setPointToCenter&plugin=AMap.PlaceSearch"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

（2）代码实现
首先在template中实现一个容器

<div id="map"></div>
<el-drawer :visible.sync="infoShow" :with-header="false" custom-class="my-drawer" :modal="false" direction="btt" :show-close="false"></el-drawer>

注意容器要给宽高否则地图将无法初始化

#map {
    width: calc(100% + 40px);
    margin-left: -20px !important;
    height: 750px;
  }

然后在mounted的生命周期钩子中进行初始化操作：

data() {
	return {
	  carsList: [],
      zoom: 14,
      center: [120.45852, 32.54514],
      iconMeta: [100, 54],
      markerMeta: [40, 60],
      startMarker: null,
      infoWindow: null,
      polyLine: null,
      map: null,
      infoShow: false,
      travelList: []
     }
},
mounted() {
      this.initMap()
  },
 methods: {
 	initMap() {
        this.map = new AMap.Map("map", {
          // 放大级别
          zoom: this.zoom,
          // 放大缩小
          resizeEnable: true,
          // 位置
          center: this.center,yin
          // 是否显示地图文字标记
          showLabel: true,
        });
      },
 }

到这儿地图应该可以展示了，接下来我们根据后端返回的数据进行markers渲染：
接口数据如下

{"msg":"操作成功","code":200,"data":[{"plate":"京D11111","travelList":[{"travelId":3,"plate":"京D11111","driverName":"驾驶员06","longitude":120.443876,"latitude":32.529353,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路"},{"travelId":4,"plate":"京D11111","driverName":"驾驶员06","longitude":120.447971,"latitude":32.531086,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路鹏福公寓"},{"travelId":5,"plate":"京D11111","driverName":"驾驶员06","longitude":120.456608,"latitude":32.534791,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路润洋花园"},{"travelId":6,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455607,"latitude":32.536035,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷中洋·现代城"},{"travelId":7,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455256,"latitude":32.536621,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷中洋·现代城"},{"travelId":8,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455211,"latitude":32.536950,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷瑞海如意紫都"},{"travelId":9,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455016,"latitude":32.537396,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道曙光西路中洋·现代城"},{"travelId":2,"plate":"京D11111","driverName":"驾驶员06","longitude":120.442825,"latitude":32.529007,"collectTime":"2022-01-27 05:16:13","departureTime":"2022-01-27 02:21:39","departurePlace":"gsg","vehicleTerminal":null,"arrivalTime":"2022-01-27 02:21:39","vehicleLocation":"海安市中城街道江海西路"},{"travelId":1,"plate":"京D11111","driverName":"驾驶员06","longitude":120.441766,"latitude":32.528713,"collectTime":"2022-01-27 02:33:57","departureTime":"2022-01-27 02:21:39","departurePlace":"gsg","vehicleTerminal":null,"arrivalTime":"2022-01-27 02:21:39","vehicleLocation":"海安市中城街道江海西路"}]}]}

根据数据渲染makers

methods: {
	getList() {
		getTrackList(this.queryParams).then((res) => {
	        this.carsList = res.data || []
	        this.initMakers()
	     })
	},
	initMakers() {
        this.map.clearMap() // 清理掉之前的所有makers
        this.carsList.forEach((car, index) => {
          let position = car.travelList.length ? car.travelList[0] : { longitude: 0, latitude: 0}
          let image = require('@/assets/images/car.png')
          let icon = new AMap.Icon({
            size: new AMap.Size(this.iconMeta[0], this.iconMeta[1]), // 图标尺寸
            image: image,
            imageSize: new AMap.Size(this.iconMeta[0], this.iconMeta[1]), // 根据所设置的大小拉伸或压缩图片
          });
          let marker = new AMap.Marker({
            position: [ position.longitude, position.latitude ],
            offset: new AMap.Pixel(-100, -30),
            icon: icon,
            map: this.map,
            extData: car,
          });
          marker.on("click", () => this.markerClick(car));
        })
      },
	
}

点击marker显示轨迹：

 markerClick(car) {
 		// 因为轨迹只要一次显示一条，所以在渲染上一条要先清理掉之前的那条以及开始的图标
        if(this.polyLine && this.startMarker) {
          this.map.remove(this.polyLine)
          this.map.remove(this.startMarker)
        }
        let maker = car.travelList && car.travelList.slice(-1)[0]
        let image = require('@/assets/images/start-point.png')
        let icon = new AMap.Icon({
          size: new AMap.Size(this.markerMeta[0], this.markerMeta[1]), // 图标尺寸
          image: image,
          imageSize: new AMap.Size(this.markerMeta[0], this.markerMeta[1]), // 根据所设置的大小拉伸或压缩图片
        });
        this.startMarker = new AMap.Marker({
          position: [ maker.longitude, maker.latitude ],
          offset: new AMap.Pixel(-20, -60),
          icon: icon,
          map: this.map
        });
        let lineList = []
        car.travelList && car.travelList.forEach((item) => {
          let point = new AMap.LngLat(item.longitude, item.latitude)
          lineList.push(point)
        })
        this.polyLine = new AMap.Polyline({
          path: lineList,
          borderWeight: 2, // 线条宽度，默认为 1
          strokeStyle: "dashed",
          strokeColor: '#428100', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        })
        this.map.add(this.polyLine)
        this.travelList = car.travelList ? car.travelList : []
        this.infoShow = true
      }

至此渲染列表以及点击marker出现轨迹以及底部出现轨迹信息就实现了。初次发帖内容空洞代码丑陋还请多多包涵~