高德地图的基本使用

第一次使用高德地图

首先是显示地图

在public目录下引入高德地图

然后开始

<div class="box-card_content">
     <div id="map"></div>
</div>

.box-card_content {
  width: 100%;
  height: 690px;
  overflow-y: auto;
  overflow-x: hidden;
}
#map {
  height: 100%;
}

在methods中定义，mounted中加载

mounted() {
    this.mapInit()
  },
methods:{
	mapInit() {
      this.map = new AMap.Map('map', {
        zoom: 11, //级别
        center: [108.886319, 34.210983], //中心点坐标
        resizeEnable: true,
      })
    },
}

效果

地图上显示marker标记

methods:{
	mapInit() {
      this.map = new AMap.Map('map', {
        zoom: 11, //级别
        center: [108.886319, 34.210983], //中心点坐标
        resizeEnable: true,
      })
    },
    showMarker(){
        var that = this
    	var marker = new AMap.Marker({
    	// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          position: new AMap.LngLat(108.94705, 34.259429), 
          title: '车车',
          //图片可以放入public目录下，不写icon默认官方蓝点
          icon: 'http://。。。。/car.png',
        })
        //也可以定义多个marker，放入数组
        var markerList = [marker]
        that.map.add(markerList)
    }
}

点击marker显示信息窗口

showMarker(){
		var that = this 
    	var marker = new AMap.Marker({
    	// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          position: new AMap.LngLat(108.94705, 34.259429), 
          title: '车车',
          //图片可以放入public目录下，不写icon默认官方蓝点
          icon: 'http://。。。。/car.png',
        })
        //也可以定义多个marker，放入数组
        var markerList = [marker]
        that.map.add(markerList)
		
		//图标注册点击事件，点击显示信息窗体
        AMap.event.addListener(marker, 'click', function () {
          var infoWindow = new AMap.InfoWindow({
            isCustom: false, //使用自定义窗体
            content: `
            <div style="padding:5px;">
                <div>所属公司：xxx</div>
                <div>接收时间：2020</div>
                <div>速度：125km/h</div>
            </div>
          `,
            offset: new AMap.Pixel(0, -20),
          })
          infoWindow.open(that.map, [108.94705, 34.259429]) //后面的参数指的是经纬度，在此显示窗口
        })
    }

轨迹回放

data(){
	return{
		speed: 200,
		lineArr: [
          [116.478935, 39.997761],
          [116.478939, 39.997825],
          [116.478912, 39.998549],
          [116.478912, 39.998549],
          [116.478998, 39.998555],
          [116.478998, 39.998555],
          [116.479282, 39.99856],
          [116.479658, 39.998528],
          [116.480151, 39.998453],
          [116.480784, 39.998302],
          [116.480784, 39.998302],
          [116.481149, 39.998184],
          [116.481573, 39.997997],
          [116.481863, 39.997846],
          [116.482072, 39.997718],
          [116.482362, 39.997718],
          [116.483633, 39.998935],
          [116.48367, 39.998968],
          [116.484648, 39.999861],
        ],
	}
}

mounted(){
	this.mapInit()
}
methods:{
	mapInit() {
        this.map = new AMap.Map('map', {
          zoom: 17, //级别
          center: [116.397428, 39.90923], //中心点坐标
          resizeEnable: true,
        })
  
        this.marker = new AMap.Marker({
          map: this.map,
          position: [116.478935, 39.997761],
          icon: 'https://webapi.amap.com/images/car.png',
          offset: new AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: -90,
        })
  
        var polyline = new AMap.Polyline({
          map: this.map,
          path: this.lineArr,
          showDir: true,
          strokeColor: '#28F', //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        })
        var passedPolyline = new AMap.Polyline({
          map: this.map,
          // path: lineArr,
          strokeColor: '#AF5', //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        })
        this.marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath)
        })
        this.map.setFitView()
        this.marker.moveAlong(this.lineArr, this.speed)
      },
}

默认加载后走完

//开始，暂停，继续，停止
marker.moveAlong()
marker.stopMove()
marker.pauseMove()
marker.resumeMove()

用轨迹回放可以做到开始暂停等控制操作，也可以用定义的speed做到倍速的控制

marker.moveAlong(this.lineArr, this.speed * 2)

但是需求是要有一个进度条来控制，轨迹回放不如轨迹巡航更方便
进度条控制：