高德地图的使用

高德地图 jsapi 下载、引入

复制代码

npm add @amap/amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader'

使用2.0版本的loader需要在window对象下先配置 securityJsCodeJS API 安全密钥使用

JS API 使用 script 标签同步加载增加代理服务器设置脚本，并将「您申请的安全密钥」替换为您的安全密钥；（注意您这个设置必须是在JS API 脚本加载之前进行设置，否则设置无效。）

复制代码

window._AMapSecurityConfig = {
  securityJsCode: '「您申请的安全密钥」'
}

使用ts时，上面这里会显示类型错误，因此需要在类型文件中配置Window的类型
interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
}

页面地图初始化加载

自定义地图-设置地图显示样式自定义地图-地图

复制代码

AMapLoader.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
})
  .then((AMap) => {
      // 地图初始化
      // Map构造函数第一个传参的map为初始化地图的容器的id,第二个传参是配置对象
      const map = new AMap.Map('map', {
        viewMode:"3D",    //是否为3D地图模式
        mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        zoom: 12 //设置地图的缩放级别
      })    
  })
  .catch((e) => {
    console.error(e) //加载错误提示
  })

根据后台返回的经纬度数组，自定义绘制行车路径，参考官方文档 -路线规划

使用插件 AMap.Driving-根据起点和终点规划自动行车路径

复制代码

AMapLoader.load({
  key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
})
  .then((AMap) => {
    // 地图初始化
    const map = new AMap.Map('map', {
      // viewMode:"3D",    //是否为3D地图模式
      mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
      zoom: 12 //设置地图的缩放级别
    })

    // 使用插件 AMap.Driving
    AMap.plugin('AMap.Driving', function () {
      const driving = new AMap.Driving({
        map: map, // 配置参数map,意思是在那个地图中绘制行车路径
        showTraffic: false, // 关闭道路情况(设置是否显示实时路况信息)
        hideMarkers: true // 关闭沿途标记(设置隐藏路径规划的起始点图标 )
      })

      // logisticsInfo是后端返回的行车路径的数组
      if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {
        const list = [...logistics.value.logisticsInfo]

        // 起点 start
        const start = list.shift()
        // 终点 end
        const end = list.pop()

        // 传入起点和终点的经纬度信息，获取对应的驾车路线规划
        driving.search(
          [start?.longitude, start?.latitude],
          [end?.longitude, end?.latitude],
          function () {
            // 未出错时，result即是对应的路线规划方案
            // 在这里绘制沿途运输位置
          }
        )
      }
    })
  })
  .catch((e) => {
    console.error(e) // 加载错误提示
  })

使用插件 AMap.Driving-自定义绘制路径，也就是把路途的途径点告知地图让其渲染路径

参考官方文档途经点参数路线规划-途经点

复制代码

// 途经点 opts 是一个对象，属性waypoints就是绘制途经点参数
const opts = {
  // 途经点参数，最多支持传入16个途经点
  waypoints: list.map((item) => [item.longitude, item.latitude])
}
driving.search(
  [start?.longitude, start?.latitude],
  [end?.longitude, end?.latitude],
  opts,
  function () {
  }
)

实现业务：关闭途径标记（ hideMarkers: true）并且实现自定义绘制起点-终点-和当前运输位置，其实就是绘制一个标记，参考官方实例自定义图标-点标记

让当前的运输位置显示在地图的正中间并且设置缩放比例，参考官方文档 setFitView-setZoom方法

参考手册-地图 JS API

复制代码

// 创建一个标记点函数
const getMarker = (point: Location, image: string, width = 25, height = 30) => {
  // 创建一个 Icon,这种方式可以设置图标的大小
  const Icon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(width, height),
    // 图标的取图地址
    image: image,
    // 图标所用图片大小
    imageSize: new AMap.Size(width, height)
  })
  // 将 icon 传入 marker
  const marker = new AMap.Marker({
    position: [point?.longitude, point?.latitude],
    // 将一张图片的地址设置为 icon
    icon: Icon,
    // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
    offset: new AMap.Pixel(-width / 2, -height)
  })
  return marker
}
const startMarker = getMarker(start!, startImg) // 起点icon标记
const endMarker = getMarker(end!, endImg)  // 终点icon标记

// 往地图上增加标记
map.add([startMarker, endMarker])

driving.search(
  function () {
    // 绘制当前运输位置，后端返回 currentLocationInfo 就是当前的运输位置 标记
    const curr = logistics.value?.currentLocationInfo   // 当前的运输位置经纬度
    const currMarker = getMarker(curr!, carImg, 33, 20) // 当前运输位置标记
    map.add([currMarker]) // 往地图上增加当前运输位置标记

    // 2s后定位当中间进行缩放
    setTimeout(() => {
      map.setFitView([currMarker]) // 定位到当前运输的位置
      map.setZoom(10) // 一定比例的缩放
    }, 2000)
  }
)

下面贴出完整绘制物流信息地图的代码

复制代码

import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'

const initMap = () => {
  AMapLoader.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      // 地图初始化
      const map = new AMap.Map('map', {
        // viewMode:"3D",    //是否为3D地图模式
        mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        zoom: 12 //设置地图的缩放级别
      })
      AMap.plugin('AMap.Driving', function () {
        const driving = new AMap.Driving({
          map: map,
          //   panel: 'panel'
          showTraffic: false,
          hideMarkers: true
        })
        if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {
          const list = [...logistics.value.logisticsInfo]
          //   创建标记函数
          const getMarker = (point: Location, image: string, width = 25, height = 30) => {
            // 创建一个 Icon,这种方式可以设置图标的大小
            const Icon = new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(width, height),
              // 图标的取图地址
              image: image,
              // 图标所用图片大小
              imageSize: new AMap.Size(width, height)
            })
            // 将 icon 传入 marker
            const marker = new AMap.Marker({
              position: [point?.longitude, point?.latitude],
              // 将一张图片的地址设置为 icon
              icon: Icon,
              // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-width / 2, -height)
            })
            return marker
          }
          // 起点 start
          const start = list.shift()
          const startMarker = getMarker(start!, startImg)
          // 终点 end
          const end = list.pop()
          const endMarker = getMarker(end!, endImg)
          map.add([startMarker, endMarker])
          // 途经点 opts
          const opts = {
            // 途经点参数，最多支持传入16个途经点
            waypoints: list.map((item) => [item.longitude, item.latitude])
          }
          driving.search(
            [start?.longitude, start?.latitude],
            [end?.longitude, end?.latitude],
            opts,
            function () {
              // 未出错时，result即是对应的路线规划方案
              // 绘制运输位置
              const curr = logistics.value?.currentLocationInfo
              const currMarker = getMarker(curr!, carImg, 33, 20)
              map.add([currMarker])
              // 2s后定位当中间进行缩放
              setTimeout(() => {
                map.setFitView([currMarker])
                map.setZoom(10)
              }, 2000)
            }
          )
        }
      })
    })
    .catch((e) => {
      console.error(e) //加载错误提示
    })
}