• 高德地图的使用

    JS API 结合 Vue 使用

    高德地图 jsapi 下载、引入

    1. npm add @amap/amap-jsapi-loader
    2.  
    3. import AMapLoader from '@amap/amap-jsapi-loader'

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

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

    1. window._AMapSecurityConfig = {
    2.   securityJsCode: '「您申请的安全密钥」'
    3. }
    4.  
    5. 使用ts时，上面这里会显示类型错误，因此需要在类型文件中配置Window的类型
    6. interface Window {
    7.   _AMapSecurityConfig: {
    8.     securityJsCode: string
    9.   }
    10. }

     页面地图初始化加载

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

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

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

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

    1. AMapLoader.load({
    2.   key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    3.   version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    4. })
    5.   .then((AMap) => {
    6.     // 地图初始化
    7.     const map = new AMap.Map('map', {
    8.       // viewMode:"3D",    //是否为3D地图模式
    9.       mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
    10.       zoom: 12 //设置地图的缩放级别
    11.     })
    12.  
    13.     // 使用插件 AMap.Driving
    14.     AMap.plugin('AMap.Driving', function () {
    15.       const driving = new AMap.Driving({
    16.         map: map, // 配置参数map,意思是在那个地图中绘制行车路径
    17.         showTraffic: false, // 关闭道路情况(设置是否显示实时路况信息)
    18.         hideMarkers: true // 关闭沿途标记(设置隐藏路径规划的起始点图标 )
    19.       })
    20.  
    21.       // logisticsInfo是后端返回的行车路径的数组
    22.       if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {
    23.         const list = [...logistics.value.logisticsInfo]
    24.  
    25.         // 起点 start
    26.         const start = list.shift()
    27.         // 终点 end
    28.         const end = list.pop()
    29.  
    30.         // 传入起点和终点的经纬度信息，获取对应的驾车路线规划
    31.         driving.search(
    32.           [start?.longitude, start?.latitude],
    33.           [end?.longitude, end?.latitude],
    34.           function () {
    35.             // 未出错时，result即是对应的路线规划方案
    36.             // 在这里绘制沿途运输位置
    37.           }
    38.         )
    39.       }
    40.     })
    41.   })
    42.   .catch((e) => {
    43.     console.error(e) // 加载错误提示
    44.   })

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

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

     

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

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

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

    参考手册-地图 JS API

    1. // 创建一个标记点函数
    2. const getMarker = (point: Location, image: string, width = 25, height = 30) => {
    3.   // 创建一个 Icon,这种方式可以设置图标的大小
    4.   const Icon = new AMap.Icon({
    5.     // 图标尺寸
    6.     size: new AMap.Size(width, height),
    7.     // 图标的取图地址
    8.     image: image,
    9.     // 图标所用图片大小
    10.     imageSize: new AMap.Size(width, height)
    11.   })
    12.   // 将 icon 传入 marker
    13.   const marker = new AMap.Marker({
    14.     position: [point?.longitude, point?.latitude],
    15.     // 将一张图片的地址设置为 icon
    16.     icon: Icon,
    17.     // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
    18.     offset: new AMap.Pixel(-width / 2, -height)
    19.   })
    20.   return marker
    21. }
    22. const startMarker = getMarker(start!, startImg) // 起点icon标记
    23. const endMarker = getMarker(end!, endImg)  // 终点icon标记
    24.  
    25. // 往地图上增加标记
    26. map.add([startMarker, endMarker])
    27.  
    28. driving.search(
    29.   function () {
    30.     // 绘制当前运输位置，后端返回 currentLocationInfo 就是当前的运输位置 标记
    31.     const curr = logistics.value?.currentLocationInfo   // 当前的运输位置经纬度
    32.     const currMarker = getMarker(curr!, carImg, 33, 20) // 当前运输位置标记
    33.     map.add([currMarker]) // 往地图上增加当前运输位置标记
    34.  
    35.     // 2s后定位当中间进行缩放
    36.     setTimeout(() => {
    37.       map.setFitView([currMarker]) // 定位到当前运输的位置
    38.       map.setZoom(10) // 一定比例的缩放
    39.     }, 2000)
    40.   }
    41. )

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

    1. import startImg from '@/assets/start.png'
    2. import endImg from '@/assets/end.png'
    3. import carImg from '@/assets/car.png'
    4.  
    5. const initMap = () => {
    6.   AMapLoader.load({
    7.     key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    8.     version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    9.   })
    10.     .then((AMap) => {
    11.       // 地图初始化
    12.       const map = new AMap.Map('map', {
    13.         // viewMode:"3D",    //是否为3D地图模式
    14.         mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
    15.         zoom: 12 //设置地图的缩放级别
    16.       })
    17.       AMap.plugin('AMap.Driving', function () {
    18.         const driving = new AMap.Driving({
    19.           map: map,
    20.           //   panel: 'panel'
    21.           showTraffic: false,
    22.           hideMarkers: true
    23.         })
    24.         if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {
    25.           const list = [...logistics.value.logisticsInfo]
    26.           //   创建标记函数
    27.           const getMarker = (point: Location, image: string, width = 25, height = 30) => {
    28.             // 创建一个 Icon,这种方式可以设置图标的大小
    29.             const Icon = new AMap.Icon({
    30.               // 图标尺寸
    31.               size: new AMap.Size(width, height),
    32.               // 图标的取图地址
    33.               image: image,
    34.               // 图标所用图片大小
    35.               imageSize: new AMap.Size(width, height)
    36.             })
    37.             // 将 icon 传入 marker
    38.             const marker = new AMap.Marker({
    39.               position: [point?.longitude, point?.latitude],
    40.               // 将一张图片的地址设置为 icon
    41.               icon: Icon,
    42.               // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
    43.               offset: new AMap.Pixel(-width / 2, -height)
    44.             })
    45.             return marker
    46.           }
    47.           // 起点 start
    48.           const start = list.shift()
    49.           const startMarker = getMarker(start!, startImg)
    50.           // 终点 end
    51.           const end = list.pop()
    52.           const endMarker = getMarker(end!, endImg)
    53.           map.add([startMarker, endMarker])
    54.           // 途经点 opts
    55.           const opts = {
    56.             // 途经点参数，最多支持传入16个途经点
    57.             waypoints: list.map((item) => [item.longitude, item.latitude])
    58.           }
    59.           driving.search(
    60.             [start?.longitude, start?.latitude],
    61.             [end?.longitude, end?.latitude],
    62.             opts,
    63.             function () {
    64.               // 未出错时，result即是对应的路线规划方案
    65.               // 绘制运输位置
    66.               const curr = logistics.value?.currentLocationInfo
    67.               const currMarker = getMarker(curr!, carImg, 33, 20)
    68.               map.add([currMarker])
    69.               // 2s后定位当中间进行缩放
    70.               setTimeout(() => {
    71.                 map.setFitView([currMarker])
    72.                 map.setZoom(10)
    73.               }, 2000)
    74.             }
    75.           )
    76.         }
    77.       })
    78.     })
    79.     .catch((e) => {
    80.       console.error(e) //加载错误提示
    81.     })
    82. }
  • 相关阅读:
    游戏企业如何高质量出海？如何保证出海内容合规
    nodejs安装和环境配置-Windows
    windows下修改mysql的max_allowed_packet的值
    1.6 线程池原理与实战
    【Linux命令】用户和用户管理
    《优 化》
    C++Prime Plus(7)
    Docker镜像的打包与加载
    万卷书 - 书单整理 [01]
    Unittest-生成HTML测试报告
  • 原文地址：https://blog.csdn.net/luoxiaonuan_hi/article/details/131410228