0
0

高德地图的使用

JS API 结合 Vue 使用

高德地图 jsapi 下载、引入

  1. npm add @amap/amap-jsapi-loader
  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. }
  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.     })
  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.       })
  21.       // logisticsInfo是后端返回的行车路径的数组
  22.       if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {
  23.         const list = [...logistics.value.logisticsInfo]
  25.         // 起点 start
  26.         const start = list.shift()
  27.         // 终点 end
  28.         const end = list.pop()
  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标记
  25. // 往地图上增加标记
  26. map.add([startMarker, endMarker])
  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]) // 往地图上增加当前运输位置标记
  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'
  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. }
标签： 数学建模
本文转载自: https://blog.csdn.net/luoxiaonuan_hi/article/details/131410228
版权归原作者 画了五官的猕猴 所有， 如有侵权，请联系我们删除。
登录后发布评论

“高德地图的使用”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。