更新记录

0.2.107(2023-01-09)

  • 修复正式打包异常问题

0.1.1215(2022-12-16)

修复 Android打自定义调试基座与uniapp版本冲突

0.1.0303(2022-03-04)

  • 修复android缩放,marker显示异常
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:7.0 - 11.0 armeabi-v7a:支持,arm64-v8a:支持,x86:未测试 适用版本区间:12 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


Mapbox

Mapbox for uniapp

QQ:380822800

使用

<zhui-mapbox ref="mapbox" :options="{ style: 'mapbox://styles/mapbox/outdoors-v11', locationEnabled: true, target: [121.1958829,31.224631] }" @location="onLocation"></zhui-mapbox>
this.$refs['mapbox'].addMarkers({ data: [{ id:'place-1', type: 'place', icon: '绝对地址或网络地址', title:'', address:'', coordinate: [121.1958829,31.224631], properties: {}}, ...]});
this.$refs['mapbox'].addLine({data: { id: 'line-1', type: 'line', width: 5, color: '#33A853', coordinates: [[121.1958829,31.224631],[121.1958829,31.2250]] }});

methods: {
  onLocation(e){
    console.log(e.detail);
  }
}

属性

名称 描述 类型 其它
options 配置选项 Object
source 自定义 source 文件 暂不支持
icons 默认加载的 点的 图标 Object
markers 默认 点 Array<Marker>
lines 默认 线 Array<Line>

事件

名称 描述 参数 其它
ready 地图加载成功
location 当前位置[经度,纬度,高度] [longitude,latitude,altitude]
scale 地图缩放(手动) {zoom:16,bearing:0,tilt:0,target:[lng,lat]}
rotate 地图旋转(手动) 同上
move 地图移动(手动) 同上
markerClick 点被点击 Marker
lineClick 线被点击 Line
error 错误信息 {code:0,message:'加载失败'}

方法

名称 描述 参数 示例 其它
addMarker 添加点 Marker this.$refs['mapbox'].addMarker({ data: Marker })
addMarkers 添加多点 Array<Marker> addMarkers({data:Markers})
updateMarker 修改点 Marker,detail updateMarker({ data: Marker, detail: {参考 Marker} })
updateMarkers 修改多点 Array<Marker>,detail updateMarkers({ data:Markers,detail: {参考 Marker} })
removeMarker 删除点 removeMarker({data:Marker})
removeMarkers 删除多点 removeMarkers({data:Markers})
addLine 添加线 Line addLine({data:Line})
addLines 添加多线 Array<Line> addLines({data:Lines})
updateLine 修改线 Line,detail updateLine({data:Line,detail: {参考 Line}})
updateLines 修改多线 Array<Line>,detail updateLines({data:Lines,detail: {}})
removeLine 删除线 removeLine({data:Line})
removeLines 删除多线 removeLines({data:Lines})
setCamera 设置相机 对象{缩放、角度、斜度、中心点},可单独设置 setCamera({data:{ zoom: 16,bearing: 0, tilt: 0, target: [lng,lat] }})
setTracking 设置跟随 string [TRACKING(正北跟随),TRACKING_COMPASS(手机指针跟随)] setTracking({data: "TRACKING"})
setLocationCenter 设置当前位置为地图中心
setBounds 设置边界 Array[gps,gps],padding[] setBounds({data: [[103.55,1.33],[103.11,1.22]],detail: [top,right,bottom.left] }) 传入两个坐标(东北、西南),作为地图显示的新区域
snapshot 截图 snapshot({},callback) callback截图回调 参数:{ code,message,data(图片地址) }

属性 options

名称 描述 类型 默认 其它
debug 调试模式 boolean false
style 地图样式 string mapbox://styles/mapbox/streets-v11 https://docs.mapbox.com/api/maps/styles/
zoom 缩放比例 float 0
bearing 角度 float 0 正北为 0
tilt 斜度 float 0
target 中心点 array []
minZoom 最小缩放 float 0
maxZoom 最大缩放 float 25.5
minTilt 最小斜度 float 0
maxTilt 最大斜度 float 60
locationEnabled 启用当前位置 boolean false 启用当前位置,会调用location事件
zoomEnabled 是否允许手动缩放 boolean true 禁用缩放,则 minZoom,maxZoom 无效
rotateEnabled 是否允许手动旋转 boolean true
scrollEnabled 是否允许手动移动 boolean true
tiltEnabled 是否允许手动斜度 boolean true
doubleTapEnabled 是否允许双击操作 boolean true
quickZoomEnabled 是否允许快速缩放 boolean true
logoEnabled 是否显示 Logo boolean true
compassEnabled 是否显示指南针 boolean true 当角度不为 0 显示指南针

Sources

{
  "source_id1": "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
  //source_id2类型不支持
  "source_id2": {
    "uri": "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
    "options": {
      "cluster": false,
      "clusterMaxZoom": 14,
      "clusterRadius": 50
    }
  }
}

Icons

{
  "icon_id_local": "/var/document/icon.png",
  "icon_id_uri": "https://www.test.com/test.png"
}

对象 Marker

名称 描述 类型 默认
id 标识 string 必填
type 类型 string 必填,作为类型区分
icon 图标(可修改) string 必填,支持本地及网络地址
icon_id 图标 ID string 对应 icons 属性(暂不支持)
width 图标宽度(可修改) float android 暂不支持
height 图标高度(可修改) float android 暂不支持
title 标题 string
address 地址 string
coordinate 坐标(可修改) array[lng,lat] 必填,坐标
properties 扩展数据 任意值 markerClick 原封返回

updateMarker,updateMarkers 可修改点的图标及大小,变换坐标

对象 Line

名称 描述 类型 默认
id 标识 string 必填
type 类型 string 必填,作为类型区分
color 颜色(可修改) string 必填, #33A853
width 线条宽度(可修改) float 必填
coordinates 坐标数组(可修改) Array[array[lng,lat]]
properties 扩展数据 任意值 lineClick 原封返回

updateLine,updateLines 可修改线颜色、宽度、及线的坐标(延长、缩短、变换)

回调 Callback

名称 描述 参数
snapshot 截图回调 { code,message,data } data: 截图本地缓存地址

示例

this.$refs['mapbox'].snapshot({}, (res) => {
  res.code;   // 0正常,1错误
  res.message;// code==1,错误消息
  res.data;   //参考 回调值
})
注意
  • coordinate 经纬度为数组,经度在前,纬度在后 [121.1958829,31.224631]

隐私、权限声明

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

获取当前地理位置

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

- 插件不采集任何数据 - 插件使用 Mapbox SDK 会采集数据,详情参考:https://www.mapbox.com/legal/privacy - 插件需要认证,请自行申请:https://account.mapbox.com/access-tokens/

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

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