更新记录

2.0.0(2023-06-07) 下载此版本

项目重构

  • 将之前的js方法,进行重构,支持uni_modules快速引入
  • 完善文档,对新手友好,快速上手
  • 使用本插件只需要两步:
    • 1.导入插件
    • 2.配置高德的微信小程序key

1.0.0(2020-01-13) 下载此版本

1.完成调用高德地图api进行路线规划基本功能


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Lyn4ever-gaodeRoutePlanning

一、说明

  • 本插件的原理是利用高德地图API进行路线规划,然后利用官方的map组件进行展示。
  • 本插件的key不需要配置密钥,如果你觉得需要配置密钥才显示,那就是其他问题。
  • 官方map组件支持的平台,本插件完全支持,但除小程序外的其他平台,需要再manifest.json中进行配置,uniapp官方文档已经很清楚了,请自行查阅文档。
  • 请原谅,非本插件问题(如:是小程序平台使用地图的问题),本人一律不予回复。
  • 如有其他疑问,请发邮件或者评论,私信不一定能看到,谢谢理解。

二、高德KEY申请

注意:本项目中使用的是高德地图微信小程序Key,是支持所有平台运行的,但其他平台需要单独配置,具体查看下文[各平台适配](#各平台适配)。

2.1 官方文档

https://lbs.amap.com/api/wx/summary/https://developer.amap.com/api/wx/summary/

2.2 步骤

  1. 填写应用信息
  2. 添加微信小程序Key

三、使用步骤

3.1 从插件市场导入uni_modules

3.2 申请并配置自己的key

修改/uni_modules/Lyn4ever-gaodeRoutePlanning\bin\config.js文件中的key为自己的

3.3 在页面中引入组件并传参数

<Lyn4ever-gaodeRoutePlanning 
        :longitude="longitude" 
        :latitude="latitude" 
        width="100vw" 
        heith="100vh"
        :Config="Config" 
        :startPoi="startPoi" 
        :wayPoi="wayPoi" 
        :endPoi="endPoi"/>

3.4 参数说明

参数名 说明 必填 格式 默认 示例
longitude 中心点经度 Number 为空时取自startPoi 108.921672
latitude 中心点纬度 Number 为空时取自startPoi 34.250646
width 地图组件宽度 String 100vw 750rpx
heith 地图组件高度 String 100vh 100rpx
Config 地图上的点和路线配置 Object 见下文 见下文
startPoi 起始点坐标 String -- 108.921672,34.250646
wayPoi 途径点坐标 String -- 108.936799,34.245842;108.973306,34.244767;109.013335,34.249303
endPoi 终点坐标 String -- 109.033673,34.252884
  • Config 配置详解 参数名 说明 必填 格式 默认 说明
    showMarks 是否显示地图上的Marker点 Boolean true --
    lineColor 路径颜色 String #0606ff 颜色值
    lineWidth 路径宽度 String 4 px单位
    startImage 起点图片 String 见页面 绝对路径/相对路径/base64/url
    wayImage 途径点图片 Object 见页面 绝对路径/相对路径/base64/url
    endImage 终点图片 String 见页面 绝对路径/相对路径/base64/url

四、各平台适配

各平台的适配能力主要取决于uniapp官方map组件,具体差异请参考uniapp-组件-地图-map

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快应用 360小程序 快手小程序 京东小程序
需要配置manifest.json 需要配置manifest.json 1.63+ 1.9.0+ x
  • 小程序
    • 各家小程序平台一般都内置了地图SDK,无需单独配置,可直接使用
    • 小程序平台,请注意配置域名白名单 (https://restapi.amap.com)
  • App
  • H5
    • 在uniapp的H5中,要想使用地图,同时也需要配置对应的key(注意,这里的key并非本项目的key,具体方法请参见H5中地图sdk配置)

五、相关问题

  • [system] Map key not configured.
    • 这是由于你在使用h5进行调试的时候,没有在manifest.json中配置高德地图的key,请参考上文解决。与本项目无关
  • 提示需要密钥与key搭配使用
    • 应该是你配置的问题,本插件的目前不需要密钥。因此这问题非本插件问题,不予回复(我猜应该是你在h5平台使用的吧,请自行查阅官方文档)。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

下载页面有广告,插件本身没广告

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问