安装

这里我们使用 vue-amap。

1
npm install -S vue-amap

引入

在 main.js 中引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
  key: '去高德地图官网申请key',
  plugin: [
    'AMap.Autocomplete',  //输入提示插件
    'AMap.PlaceSearch',  //POI搜索插件
    'AMap.Scale',  //右下角缩略图插件 比例尺
    'AMap.OverView',  //地图鹰眼插件
    'AMap.ToolBar',  //地图工具条
    'AMap.MapType',  //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor',  //编辑 折线多，边形
    'AMap.CircleEditor',  //圆形编辑器插件
    "AMap.Geolocation"  //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: '1.0',
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});
Vue.use(VueAMap);

初始化地图

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <el-amap
      ref="map"
      class="track"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :events="events"
    ></el-amap>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "Track",
  data() {
    const that = this;
    return {
      map: null,
      amapManager,
      events: {
        // 地图图块加载完成后触发事件
        complete() {
          that.map = that.amapManager.getMap();
        },
        // 点击事件
        click: (e) => {
          const { lng, lat } = e.lnglat;
          console.log(`当前点击点的经纬度为：${lng},${lat}`);
        },
      }
    };
  }
};
1
2
3
4
.track {
  width: 100%;
  height: 500px;
}

绘制多个标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <el-amap
      ref="map"
      class="track"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :events="events"
    >
      <div class="actions">
        <el-button @click="addMarkBtn">添加标记</el-button>
      </div>
    </el-amap>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "Track",
  data() {
    const that = this;
    return {
      map: null,
      amapManager,
      events: {
        // 地图图块加载完成后触发事件
        complete() {
          that.map = that.amapManager.getMap();
        },
        // 点击事件
        click: (e) => {
          const { lng, lat } = e.lnglat;
          console.log(`当前点击点的经纬度为：${lng},${lat}`);
        },
      },
      infoWindow: null,
      markers: [],
    };
  },
  methods: {
    addMarkBtn() {
      if (this.infoWindow) {
        this.infoWindow.close();
      }
      if (this.markers) {
        this.map.remove(this.markers);
      }

      let positions = [
        {
          id: 0,
          name: '第一个标记',
          lng: 116.368904,
          lat: 39.913423
        },
        {
          id: 1,
          name: '第二个标记',
          lng: 116.398258,
          lat: 39.912501
        },
      ]

      this.infoWindow = new AMap.InfoWindow({});

      for (let i = 0, marker; i < positions.length; i++) {
        marker = new AMap.Marker({
          map: this.map,
          position: [positions[i].lng, positions[i].lat],
        });
        marker.id = positions[i].id;
        marker.content = `
          <div>姓名：${positions[i].name}</div>
        `;
        marker.on("click", this.markerClick);
        marker.emit("click", { target: marker });
        this.markers.push(marker);
      }

      this.map.setFitView();
    },
    markerClick(e) {
      console.log('传参：' + e.target.id)
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
  }
};
1
2
3
4
5
6
7
8
9
10
11
.track {
  width: 100%;
  height: 500px;
}

.actions{
  position: fixed;
  z-index: 999;
  right: 100px;
  bottom: 60px;
}

绘制轨迹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <el-amap
      ref="map"
      class="track"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :events="events"
    >
      <div class="actions">
        <el-button @click="addTrackBtn">绘制轨迹</el-button>
      </div>
    </el-amap>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "Track",
  data() {
    const that = this;
    return {
      map: null,
      amapManager,
      events: {
        // 地图图块加载完成后触发事件
        complete() {
          that.map = that.amapManager.getMap();
        },
        // 点击事件
        click: (e) => {
          const { lng, lat } = e.lnglat;
          console.log(`当前点击点的经纬度为：${lng},${lat}`);
        },
      },
      polyline: null,
      passedPolyline: null,
      marker: null,
    };
  },
  methods: {
    addTrackBtn() {
      if (this.polyline) {
        let polylines = [this.polyline, this.passedPolyline];
        this.map.remove(polylines);
        this.map.remove(this.marker);
      }

      let 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],
      ]

      this.marker = new AMap.Marker({
        map: this.map,
      });

      this.polyline = new AMap.Polyline({
        map: this.map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid", //线样式
      });

      this.passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色
        strokeWeight: 6, //线宽
      });

      let _this = this;
      this.marker.on("moving", function (e) {
        _this.passedPolyline.setPath(e.passedPath);
      });

      //计算轨迹长度
      let distance = Math.round(
        AMap.GeometryUtil.distanceOfLine(lineArr)
      );

      this.map.setFitView();

      this.marker.moveAlong(
        lineArr,
        (distance / 200) * 90,
        function (k) {
          return k;
        },
        true
      );
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
.track {
  width: 100%;
  height: 500px;
}

.actions{
  position: fixed;
  z-index: 999;
  right: 100px;
  bottom: 60px;
}

解决vue-amap文档示例无法查看

参考解决办法


参考

用生命研发技术 - vue-amap（高德地图JSAPI2.0）

高德开放平台 - JS API 2.0 示例

vue-amap - 文档