js用高德地图API实现地图轨迹绘制并添加标记

前言：

这两天项目中有个需求，需要在js中结合高德地图API，实现车辆的运行轨迹绘制，并添加起点和终点图标作为标记，使展示更直观。

本文将实现步骤作具体说明。

备注：我的是vue项目，以此为例。

一、项目的具体需求

将车辆🚗的运行轨迹，打点成线，展示成地图，地图可拖动，可放大缩小，并展示起点、终点、外出里程。

想要的效果，如下图所示：

下图是对上面的效果图的标记说明（其中左上角的"返回键"图标是我们项目需要，可忽略）：

二、实现步骤

准备工作：

要使用高德地图API，您需要先获取API密钥：

在高德开放平台注册一个账户，如果已经有账户，请直接登录。

创建一个应用程序，选择"Web端"应用程序类型。

在应用程序详情页面中，您将看到您的API密钥。请务必妥善保存您的密钥，因为您需要在JavaScript代码中使用它。

在JavaScript中使用高德地图API可以通过以下步骤来添加标记并绘制轨迹。

首先需要引入高德地图的 JavaScript API库文件到HTML页面中：

html 复制代码

<script src="https://webapi.amap.com/maps?v=2.0&key=your_api_key"></script>

其中your_api_key应该被替换为你自己的高德地图开发者密钥。

注：vue项目中，这行代码写在index.html文件中即可。

创建地图容器，并初始化地图对象。可以在页面上添加一个div元素作为地图容器，然后使用JavaScript代码将其转换成地图对象。例如：

先在html中添加一个div：

html 复制代码

<div class="mapview" id="mapContainer" ref="mapview"></div>

然后在js中初始化地图(vue项目中，这步操作要在mounted()中进行)：

js 复制代码

mounted() {
  this.initMap()
},
methods: {
  initMap() {
      let map = new AMap.Map('mapContainer', {
        resizeEnable: true, // 可以调整任意窗口大小
        zoom: 3, // 设置地图缩放级别
        center: [lng, lat] // 设置地图中心点经纬度
      })
      this.myMap = map

      /** 下面这部分可按需选用 */
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function () {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar())
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale())
      })
    },
}

这里'mapContainer'是一个div元素的id，表示将地图展示在网页上的位置；[lng, lat]则是地图的默认中心点经纬度。您可以更改中心点和缩放级别，以适应您的需要。

3、使用Marker添加标记点（使用图标标记起点和终点），需要用到经纬度信息：

因为我这边的数据是这样的，所以需要处理一下数组，即将每个数组中的经纬度取出，组成一个数组：

想要的数据格式如下：

代码处理方式：

js 复制代码

const paths = trackPositions.map(item => {
    return [item.longitude, item.latitude]
})

数组的第一个元素和最后一个元素，分别是起点和终点。

根据起点和终点的经纬度信息，将标记添加到地图上：

js 复制代码

  // 起始地
  const startPosition = paths[0]
  const startIcon = new AMap.Icon({
    size: new AMap.Size(40, 40),
    image: require('@/assets/images/start-point.png'),
    imageSize: new AMap.Size(40, 40)
  })
  const startMarker = new AMap.Marker({
    position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]),
    icon: startIcon,
    offset: new AMap.Pixel(-20, -35)
  })
  this.myMap.add([startMarker])

  // 目的地
  const endPosition = paths[paths.length - 1]
  const endIcon = new AMap.Icon({
    size: new AMap.Size(40, 40),
    image: require('@/assets/images/end-point.png'),
    imageSize: new AMap.Size(40, 40)
  })
  const endMarker = new AMap.Marker({
    position: new AMap.LngLat(endPosition[0], endPosition[endPosition.length - 1]),
    icon: endIcon,
    offset: new AMap.Pixel(-20, -35)
  })

  this.myMap.add([endMarker])

创建轨迹线路：
根据提供的轨迹数据，创建路线对象并添加到地图上。可以使用AMap.Polyline类来创建路线对象。

js 复制代码

const polyline = new AMap.Polyline({
    path: paths,
    strokeColor: 'rgb(0, 0, 0)', // 线颜色
    strokeWeight: 5, // 线宽
    strokeOpacity: 0.25 // 线透明度
})
this.myMap.add(polyline)

最后，根据地图上添加的轨迹点分布情况，自动缩放地图到合适的视野级别：

js 复制代码

// 这一行写在最后
this.myMap.setFitView()

这样就能在地图上看到轨迹了。

三、js部分完整的代码示例

js 复制代码

mounted() {
    this.initMap()
    this.getMapApi()
},
methods: {
    initMap() {
        let map = new AMap.Map('mapContainer', {
            resizeEnable: true,
            zoom: 3
        })
        this.myMap = map
        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function () {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar())
            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale())
        })
    },
    async getMapApi() {
        if (this.trackPositions && this.trackPositions.length) {
            this.createMap(this.trackPositions)
        }
    },
    createMap(data = []) {
        // 清空地图上的轨迹点
        this.myMap.clearMap()
        const paths = data.map(item => {
            return [item.longitude, item.latitude]
        })
  
        // 起始地
        const startPosition = paths[0]
        const startIcon = new AMap.Icon({
            size: new AMap.Size(40, 40),
            image: require('@/assets/images/start-point.png'),
            imageSize: new AMap.Size(40, 40)
        })
        const startMarker = new AMap.Marker({
            position: new AMap.LngLat(startPosition[0], startPosition[startPosition.length - 1]),
            icon: startIcon,
            offset: new AMap.Pixel(-20, -35)
        })
        this.myMap.add([startMarker])

        // 目的地
        const endPosition = paths[paths.length - 1]
        const endIcon = new AMap.Icon({
            size: new AMap.Size(40, 40),
            image: require('@/assets/images/end-point.png'),
            imageSize: new AMap.Size(40, 40)
        })
        const endMarker = new AMap.Marker({
            position: new AMap.LngLat(endPosition[0], endPosition[endPosition.length - 1]),
            icon: endIcon,
            offset: new AMap.Pixel(-20, -35)
        })

        this.myMap.add([endMarker])

        const polyline = new AMap.Polyline({
            path: paths,
            strokeColor: 'rgb(0, 0, 0)', // 线颜色
            strokeWeight: 5, // 线宽
            strokeOpacity: 0.25 // 线透明度
        })
        this.myMap.add(polyline)
        this.myMap.setFitView() // 根据地图上添加的轨迹点分布情况，自动缩放地图到合适的视野级别
    }
}

分享给大家一篇比较好的相关文章：
javascript用高德地图api实现地图轨迹绘制

以上，希望对大家有帮助！