更新记录

1.0.0（2023-12-27）

新版发布

平台兼容性

Android Android CPU类型 iOS
适用版本区间：5.0 - 14.0 armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 适用版本区间：11 - 17

原生插件通用使用流程：

  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原生插件配置”->”云端插件“列表中删除该插件重新选择

特别提醒

  • 购买本插件前，请先试用，请先试用，请先试用，自测确认满足需求之后再行购买。虚拟物品一旦购买之后无法退款；
  • 如有使用上的疑问、bug，可以QQ（381996687）联系作者；
  • 作者可承接各类插件定制，价格美丽有意向可加q详谈；
  • 请在合法范围内使用，若使用本插件做非法开发，本方概不负责；
  • 请仔细阅读文档结合示例demo测试有问题加q联系作者；

插件功能介绍

  1. uniapp nvue百度地图。基础地图功能，地图功能点：显示定位点、设置地图中心点、点标记（点击点回调）、点聚合、获取地图中心点坐标、轨迹回放（可设置小车速度、支持开始、暂停）。

  2. 检索功能，suggestion检索、POI检索（关键字、周边检索）、POI详情检索。

  3. 地理编码与逆地理编码。

  4. 热力图

  5. 地图截屏

  6. 天气服务

注意事项：

  1. 本插件使用需要勾选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 预警详细提示信息，高级字段

隐私、权限声明

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

Android： <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

插件使用百度地图SDK，参考其官方网站https://lbsyun.baidu.com/ 和隐私政策 https://lbsyun.baidu.com/index.php?title=openprivacy插件自身不采集用户信息。

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

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...