更新记录
1.0.0(2023-12-27)
新版发布
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:5.0 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:11 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
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原生插件配置”->”云端插件“列表中删除该插件重新选择
特别提醒
- 购买本插件前,请先试用,请先试用,请先试用,自测确认满足需求之后再行购买。虚拟物品一旦购买之后无法退款;
- 如有使用上的疑问、bug,可以QQ(381996687)联系作者;
- 作者可承接各类插件定制,价格美丽有意向可加q详谈;
- 请在合法范围内使用,若使用本插件做非法开发,本方概不负责;
- 请仔细阅读文档结合示例demo测试有问题加q联系作者;
插件功能介绍
-
uniapp nvue百度地图。基础地图功能,地图功能点:显示定位点、设置地图中心点、点标记(点击点回调)、点聚合、获取地图中心点坐标、轨迹回放(可设置小车速度、支持开始、暂停)。
-
检索功能,suggestion检索、POI检索(关键字、周边检索)、POI详情检索。
-
地理编码与逆地理编码。
-
热力图
-
地图截屏
-
天气服务
注意事项:
- 本插件使用需要勾选Maps模块,Maps-->百度地图,填入百度地图开放平台申请的key。
插件使用
地图
地图使用component方式,必须在nvue中使用
-
引入地图
<yt-bdMap ref="bdMap" style="width: 750rpx;flex: 1;" :bubbleBackdrop="bubbleBackdrop" :aggregationColors="aggregationColors" :zoomControlsEnabled="zoomControlsEnabled" :zoomLevel="zoomLevel" :showMapScaleBar="showMapScaleBar" :mapType="mapType" :showsUserLocation="showsUserLocation" :isAggregation="isAggregation" :showAllPoint="showAllPoint" @clickAnnotationView="clickAnnotationView" @annotationViewForBubble="annotationViewForBubble" @onMapCenterLatLng="onMapCenterLatLng" @onMapClick="onMapClick" @onMapPoiClick="onMapPoiClick"></yt-bdMap>
- 参数说明
参数 | 值类型 | 说明 |
---|---|---|
bubbleBackdrop | String | maker气泡图片路径(Android独有) |
zoomControlsEnabled | bool | 地图缩放空间显隐(Android独有) |
zoomLevel | int | 地图初始等级(4-21) |
showMapScaleBar | bool | 是否显示比例尺 |
mapType | 地图类型(standard标准、satellite卫星) | |
isAggregation | bool | 是否显示定位点 |
showMapScaleBar | bool 是否点聚合 --默认不聚合 | |
showAllPoint | bool | 所有点显示在屏幕中 isAggregation=false有效 |
aggregationColors | object | 点聚合不同数量的背景色,详细见下表 |
clickAnnotationView | function | 点击点标记回调(详情见示例demo--bdMap.nvue) |
annotationViewForBubble | function | 点击气泡回调(详情见示例demo--bdMap.nvue) |
onMapClick | function | 点击地图空白处回调(详情见示例demo--bdMap.nvue) |
onMapPoiClick | function | 点击地图建筑物回调(详情见示例demo--bdMap.nvue) |
onMapCenterLatLng | function | 拖拽地图后返回地图中心点经纬度(详情见示例demo--bdMap.nvue) |
- aggregationColors 点聚合不同数量背景色说明
参数 | 值类型 | 说明 |
---|---|---|
firstStage | "#FF00FF"(HEX色值2-5个点) | |
secondStage | "#FF00FF"(HEX色值5-10个点) | |
thirdStage | "#FF00FF"(HEX色值10-20个点) | |
otherStage | "#FF00FF"(HEX色值20以上) |
- 引入插件
const bdPoiModule = uni.requireNativePlugin('YT-DCBdMap-PoiModule');
- 生命周期函数
<!--管理生命周期-->
onShow() {
if (this.$refs.bdMap != null) {
this.$refs.bdMap.mapViewWillAppear();
}
},
onHide() {
this.$refs.bdMap.mapViewWillDisappear();
},
onLoad() {
//百度地图SDK所有接口均支持百度坐标和国测局坐标,用此方法设置您使用的坐标类型可设置"BMK_COORDTYPE_COMMON"(gcj02),"BMK_COORDTYPE_BD09LL(bd09ll)"
bdPoiModule.setCoordinateTypeUsedInBaiduMapSDK("BMK_COORDTYPE_BD09LL", res => {
if (res.result == 1 || res.result == true) {
uni.showToast({
icon: 'none',
title: '设置成功',
duration: 1500
})
}
})
},
onUnload() {
//释放资源
this.$refs.bdMap.mapDestroy();
bdPoiModule.destroy();
},
- 设置地图中心点
this.$refs.bdMap.changeMapViewCenterCoordinate({
centerLng: "120.26363708577145",
centerLat: "30.44676187736189"
});
- 地图绘制点
let data = [];
for (let i = 0; i < 30; i++) {
let lat = Math.random() * 100 * 0.001;
let lng = Math.random() * 100 * 0.001;
let latStr = 30.447782 + lat + "";
let lngStr = 120.279072 + lng + "";
let dict = {
lat: latStr,
lng: lngStr,
iconPath: i % 2 == 0 ? plus.io.convertLocalFileSystemURL('/static/icon_annotation1.png') : plus
.io.convertLocalFileSystemURL('/static/icon_annotation2.png'),
title: "大郎的西瓜" + i
};
data.push(dict)
}
this.$refs.bdMap.uploadPointPolymerization({
datasource: data
});
- 地图截图
var imagePath = plus.io.convertLocalFileSystemURL("_doc/snapshotPath");
let time = new Date().getTime();
var name = time + ".jpg"
this.$refs.bdMap.snapshot({
path: imagePath,
name: name
}, res => {
this.path = res.result
uni.navigateTo({
url: `./showSnapshot?path=${res.result}`
})
})
- 清除制定路径下图片
bdPoiModule.clearPath(this.path, res => {
uni.showToast({
icon: "none",
title: res.result ? "删除成功" : "删除失败"
})
})
热力图
<!--heatMap.nvue-->
<yt-heatMapComponent style="width: 750rpx;flex: 1;" ref="heateMap"></yt-heatMapComponent>
- 生命周期
onShow() {
if (this.$refs.heateMap != null) {
this.$refs.heateMap.heatMapResume();
}
},
onHide() {
this.$refs.heateMap.heatMapOnPause();
},
onUnload() {
this.$refs.heateMap.heatMapOnDestroy();
},
- 接口说明
//添加数据-- 数据格式[{"lng": 112.656745, "lat": 26.878653}]
this.$refs.heateMap.addHeatMapData(locations)
//删除热力图
this.$refs.heateMap.removeHeatMap();
//设置热力图背景色与透明度--需在添加数前调用
this.$refs.heateMap.configHeatMapProperty({
//透明度
opacity: 0.8,
// 设置热力图渐变色用到的所有颜色数组 数组长度必须和startPoint相同且必须与startPoint同时传才有效-可不传
colors: ["#00ffff", "#ff00ff", "#0000ff"],
// 设置热力图每一个颜色的起始点数组 数组长度必须和colors相同且必须与colors同时传才有效-可不传
startPoint: [0.3, 0.7, 1]
});
POI检索
- 引入插件
//poi搜索
const bdPoiModule = uni.requireNativePlugin('YT-DCBdMap-PoiModule');
- suggestion搜索
// 城市:必传 关键字:必传
bdPoiModule.requestSuggestion("杭州", "银", res => {
console.log(res)
if(res.code == 200){
this.poiList = res.result
}
/*
//返回值
res={
"code":"200",
"result":[
{
"lat": 30.25797,
"district": "上城区",
"key": "杭州湖滨银泰in77C2区",
"lng": 120.171296,
"city": "杭州市",
"tag": "购物中心",
"address": "杭州市-上城区-延安路258号",
"uid": "881864e2256b1bad77e5b679",
"poiChildrenInfoList":[
{
"lat": "",
"lng": "",
"tag": "",
"address": "",
"name": "湖滨银泰in77C区-出入口 杭州市上城区",
"showName": "出入口",
"uid": "a6f45c265314829546e27431"
}
]
}
]
}
*/
})
},
- 城市关键字检索
bdPoiModule.searchInCity({
city: "杭州",//城市必填
keyword: "美食",//关键字必填
pageCapacity: "10",//每页数据条数 默认10
pageNum: '0',//当前页码
tag: ""//标签 如:"美食"
}, res => {
/*
res={
"code": 200,
"result": [{
"streetId": "1675f1eefa9b7c990f0e6beb",
"lat": 30.446599,
"phoneNum": "13868073317",
"city": "杭州市",
"lng": 120.273909,
"area": "临平区",
"province": "浙江省",
"name": "老年根里",
"address": "浙江省杭州市临平区绿洲路319号-323号",
"uid": "1675f1eefa9b7c990f0e6beb"
}],
}
*/
console.log(res)
if(res.code == 200){
this.poiList = res.result
}
})
- 周边检索(已传入的经纬度为圆心,传入的值为半径搜索)
bdPoiModule.searchNearby({
lat: "30.44676187736189", //中心点纬度
lng: "120.26363708577145", //中心点经度
radius: "10000", //半径
pageNum: "0", //page下标
pageCapacity: "10", //每页数据条数
iosKeyword:'美食',//iOS关键字可以多个(用因为,隔开最多10个),为了区分安卓,iOS特有字段
keyword: "美食" //关键字
}, res => {
/*
res={
"code": 200,
"result": [{
"streetId": "1675f1eefa9b7c990f0e6beb",
"lat": 30.446599,
"phoneNum": "13868073317",
"city": "杭州市",
"lng": 120.273909,
"area": "临平区",
"province": "浙江省",
"name": "老年根里",
"address": "浙江省杭州市临平区绿洲路319号-323号",
"uid": "1675f1eefa9b7c990f0e6beb"
}],
}
*/
console.log(res)
if(res.code == 200){
this.poiList = res.result
}
})
- POI详情检索
bdPoiModule.searchPoiDetail({
//多个uid用逗号(英文,)分割,最多10个
uids: "a6f45c265314829546e27431"
}, res => {
console.log(res)
})
- 释放资源
bdPoiModule.destroy();
轨迹回放
- 引入插件
const bdPoiModule = uni.requireNativePlugin('YT-DCBdMap-PoiModule');
- 使用说明
<yt-trackPlaybackMap ref="trackPlaybackMap" style="width: 750rpx;flex: 1;" :annotationConfig="annotationConfig"
:trajectoryType="trajectoryType" @trackPlaybackHandle="trackPlaybackHandle"
@clickAnnotationView="clickAnnotationView"
@annotationViewForBubble="annotationViewForBubble"></yt-trackPlaybackMap>
- 参数说明
参数 | 值类型 | 说明 |
---|---|---|
annotationConfig | objc | annotation设置,包过路径宽度,背景色等详情见下表annotationConfig 介绍 |
trajectoryType | string | 区域还是折线(Polygon:区域 Polyline:折线) |
trackPlaybackHandle | function | 轨迹回放进度回调 |
clickAnnotationView | function | 点击maker回调 |
annotationViewForBubble | function | 点击气泡回调 |
- annotationConfig 说明
| annotationStarIcon | String |起点的icon路径,不需要可不传,使用方法见示例demo(trackPlay.nvue)| | annotationEndIcon |string|终点icon路径,使用方法见示例demo(trackPlay.nvue)| | annotationMoveIcon |string|移动小车icon路径,这里小车切图的方向需与示例demo中的小车一致| | lineWidth |string|轨迹宽度| | strokeColor |string|轨迹背景色(hex色值如:”#99ffFF“)| | lineAlpha |string|轨迹背景色透明度(0~1.0)|
- 设置地图坐标
bdPoiModule.setCoordinateTypeUsedInBaiduMapSDK("BMK_COORDTYPE_BD09LL", res => {
if (res.result == 1 || res.result == true) {
uni.showToast({
icon: 'none',
title: '设置成功',
duration: 1500
})
}
})
- 更新轨迹
let data = [{
lat: "30.446793",
lng: "120.264038"
},
{
lat: "30.444731",
lng: "120.264556"
},
{
lat: "30.446241",
lng: "120.267592"
},
{
lat: "30.447362",
lng: "120.271024"
},
{
lat: "30.449028",
lng: "120.269775"
},
{
lat: "30.448638",
lng: "120.268859"
},
{
lat: "30.449728",
lng: "120.267691"
},
{
lat: "30.448996",
lng: "120.266182"
}
];
this.$refs.trackPlaybackMap.uploadTrackPlayback({
datasource: data,
startPointTitle: "起点",
endPointTitle: "终点",
movePointTitle: "京A88888",
movePointSubTitle: "杨师傅"
});
- 更新地图中心点
this.$refs.trackPlaybackMap.changeMapViewCenterCoordinate({
centerLng: "120.26363708577145",
centerLat: "30.44676187736189"
});
- 开始/暂停动画
this.$refs.trackPlaybackMap.resumeOrPauseAnimation();
- 设置动画速度
//正常速度
this.$refs.trackPlaybackMap.setSpeed(1);
//两倍速度
this.$refs.trackPlaybackMap.setSpeed(2);
//4倍速度
this.$refs.trackPlaybackMap.setSpeed(4);
//8倍速度
this.$refs.trackPlaybackMap.setSpeed(8);
天气服务
国内天气查询服务分为基础服务和高级权限。 在基础服务中,用户可通过行政区划代码查询实时天气信息及未来5天天气预报。 在高级权限中,用户可通过经纬度查询实时天气信息、未来7天天气预报及未来24小时逐小时预报。同时,用户还可以通过高级权限获取国内空气质量指数、生活指数、气象预警等丰富信息。(使用高级权限需先去申请)
注意:使用经纬度loaction字段发起天气检索和返回结果BMKSuggestionSearchResult中部分字段需要申请高级服务权限,首先需要进行企业认证, 之后需要提交工单申请这个权限, 并详细说明使用场景, 包括但不限于, 使用开放平台哪些产品及服务, 应用在贵方哪些产品及应用上以及该产品或应用的相关介绍, 预估使用配额多少等。另外需附带AK信息。
- 引入查询天气模块
const weatherModule = uni.requireNativePlugin('YT-DCBdMap-WeatherModule');
- 天气查询
let options = {
// 使用经纬度查询需要高级权限,(自行去百度地图官网申请)在高级权限中,用户可通过经纬度查询实时天气信息、未来7天天气预报及未来24小时逐小时预报。同时,用户还可以通过高级权限获取国内空气质量指数、生活指数、气象预警等丰富信息。
// 使用经纬度loaction字段发起天气检索和返回结果BMKSuggestionSearchResult中部分字段需要申请高级服务权限,首先需要进行企业认证, 之后需要提交工单申请这个权限, 并详细说明使用场景, 包括但不限于, 使用开放平台哪些产品及服务, 应用在贵方哪些产品及应用上以及该产品或应用的相关介绍, 预估使用配额多少等。另外需附带AK信息
// latLng:{//根据经纬度获取与districtID二选一。
// lat:30.446959,
// lng:120.263738
// },
// 区县的行政区划编码
districtID:"361003",
// 天气服务类型,默认国内
serverType:0,//0:国内 1:国外
// 天气数据类型
dataType:1,//1:实时天气预报 2:未来五天天气预报 3:按小时天气预报,高级字段 4:生活指数,仅支持国内,高级字段 5:天气事件预警,仅支持国内,高级字段 6:以上全部,高级字段获取对应权限后可返回
// 语言
languageType:0//0:中文 1:英文
}
weatherModule.weatherSearch(options,res=>{
})
- 参数说明
参数 | 值类型 | 说明 |
---|---|---|
latLng | objc | 需要查询地方的经纬度(与districtID二选一,latLng优先级高),需要高级权限 |
districtID | string | 区县的行政区划编码(与latLng二选一,latLng优先级高) |
serverType | int | 天气服务类型 0:国内 1:国外,默认国内 |
dataType | int | 天气数据类型1:实时天气预报 2:未来五天天气预报 3:按小时天气预报,高级字段 4:生活指数,仅支持国内,高级字段 5:天气事件预警,仅支持国内,高级字段 6:以上全部,高级字段获取对应权限后可返回 |
districtID | string | 区县的行政区划编码(与latLng二选一,latLng优先级高) |
languageType | int | 0:中文 1:英文 默认中文 |
返回数据解析:
参数 | 值类型 | 说明 |
---|---|---|
location | objc | 地理位置信息,详情见下表location说明 |
realTimeWeather | objc | 天气实况数据,详情见下表realTimeWeather说明 |
forecasts | arr | 未来5天天气数据,详情见下表forecasts说明 |
forecastHours | arr | 高级字段 未来24小时逐小时预报,详情见forecastHours说明 |
lifeIndexes | arr | 生活指数 高级字段,详情见lifeIndexes说明 |
weatherAlerts | arr | 生活指数 高级字段,详情见lifeIndexes说明 |
location说明:
参数 | 值类型 | 说明 |
---|---|---|
country | string | 国家 |
province | string | 省 |
city | string | 市 |
district_name | string | 区县名称 |
district_iD | string | 区县ID |
realTimeWeather说明:
参数 | 说明 |
---|---|
relative_humidity | 相对湿度 |
sensory_temp | 体感温度 |
phenomenon | 天气现象 |
wind_direction | 风向描述 |
update_time | 数据更新时间 |
temperature | 温度 |
wind_power | 风力等级 |
clouds | 云量(高级字段) |
hourly_precipitation | 1小时累计降水量(mm),高级字段 |
visibility | 能见度,高级字段 |
O3 | 臭氧浓度(μg/m3),高级字段,仅国内支持 |
PM2_5 | pm2.5浓度(μg/m3),高级字段,仅国内支持 |
NO2 | 二氧化氮浓度(μg/m3),高级字段,仅国内支持 |
SO2 | 二氧化硫浓度(μg/m3),高级字段,仅国内支持 |
air_quality_index | 空气质量指数数值,高级字段,仅国内支持 |
PM10 | pm10浓度(μg/m3),高级字段,仅国内支持 |
CO | 一氧化碳浓度(mg/m3),高级字段,仅国内支持 |
forecasts说明:对象数组下面对对象字段解释
参数 | 说明 |
---|---|
date | 日期,北京时区 |
week | 星期,北京时区 |
lowest_temp | 最低温度(℃) |
highest_temp | 最高温度(℃) |
wind_power_day | 白天风力 |
wind_power_night | 晚上风力 |
wind_direction_day | 白天风向 |
wind_directionr_night | 晚上风向 |
phenomenon_day | 白天天气气象 |
phenomenon_night | 晚上天气气象 |
air_quality_index | 空气质量指数数值,高级字段 |
forecastHours说明:24小时逐小时预报,需要高级权限,对象数组。
参数 | 说明 |
---|---|
relative_humidity | 相对湿度(%),高级字段 |
data_time | 数据时间,高级字段 |
wind_direction | 风向描述,高级字段 |
wind_power | 风力等级,高级字段 |
temperature | 温度(℃),高级字段 |
clouds | 云量 |
phenomenon | 天气现象,高级字段 |
hourly_precipitation | 1小时累计降水量(mm),高级字段 |
lifeIndexes说明:生活指数,需要高级权限,对象数组
参数 | 说明 |
---|---|
name | 生活指数中文名称,高级字段 |
brief | 生活指数概要说明,高级字段 |
detail | 生活指数详细说明,高级字段 |
weatherAlerts说明:气象预警,需要高级权限,对象数组
参数 | 说明 |
---|---|
type | 预警事件类型,高级字段 |
level | 预警事件等级,高级字段 |
title | 预警详细提示信息,高级字段 |