百度地圖微信小程序JavaScript API（簡稱小程序JSAPI），支持在微信小程序中使用百度數(shù)據(jù)資源。小程序JSAPI是對百度地圖Web服務(wù)API中的部分接口按照微信小程序的規(guī)范進(jìn)行了前端JS封裝，方便了微信小程序開發(fā)者的調(diào)用。部分接口對返回的POI等數(shù)據(jù)按照微信小程序的數(shù)據(jù)格式進(jìn)行了處理，可直接用于小程序的map中。
一、環(huán)境部署
1.need to be declared in the requiredPrivateInfos
wx.getLocation need to be declared in the requiredPrivateInfos field in app.json/ext.json(env: Windows,mp,1.06.2303220; lib: 2.31.1)
官方說明：
requiredPrivateInfos
自 2022 年 7 月 14 日后發(fā)布的小程序，使用以下8個地理位置相關(guān)接口時，需要聲明該字段，否則將無法正常使用申明需要使用的地理位置相關(guān)接口，類型為數(shù)組。
目前支持以下項(xiàng)目：
- getFuzzyLocation: 獲取模糊地理位置
- getLocation: 獲取精確地理位置
- onLocationChange: 監(jiān)聽實(shí)時地理位置變化事件
- startLocationUpdate: 接收位置消息（前臺
- startLocationUpdateBackground:
- 接收位置消息（前后臺） chooseLocation: 打開地圖選擇位置
- choosePoi: 打開POI列表選擇位置
- chooseAddress: 獲取用戶地址信息
注：若使用以上接口，均需在小程序管理后臺，「開發(fā)」-「開發(fā)管理」-「接口設(shè)置」中自助開通該接口權(quán)限。
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"startLocationUpdateBackground",
"chooseAddress"
],
2.api.map.baidu.com 不在以下 request 合法域名
https://api.map.baidu.com 不在以下 request 合法域名列表中，請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
解決方案：
設(shè)置請求合法域名，才能正常使用百度小程序 JavaScript API。
登錄微信小程序－> “設(shè)置” －> “開發(fā)設(shè)置” －> “服務(wù)器域名” －>添加 https://api.map.baidu.com; －> 點(diǎn)擊"保存并提交"。
3.width and heigth of marker id 9 are required
[渲染層錯誤] [Component]
二、核心代碼
鑒于百度地圖微信小程序依然是基于騰訊地圖map組件開發(fā)的，因此在功能的拓展性、更新速度都不很理想。本案例是基于百度地圖微信小程序的基礎(chǔ)，予以開發(fā)。
- wx.showModal，彈窗功能
- POI坐標(biāo)單擊更換顏色功能（百度地圖原有功能）；
- wx.openLocation，導(dǎo)航（支持騰訊、百度、高德、APPLE地圖功能）
電腦端的導(dǎo)航和手機(jī)端預(yù)覽導(dǎo)航有差異，見下圖：
（一）邏輯層index.js
- 引入百度地圖API接口，并配置全局變量
var bmap = require('../../libs/bmap-wx.min.js');
var wxMarkerData = [];
- Marker單擊事件
//POI單擊事件
makertap: function (e) {
var that = this;
var id = e.markerId;
that.showSearchInfo(wxMarkerData, id);
that.changeMarkerColor(wxMarkerData, id);
},
- 引入百度地圖對象
此處的AK為對應(yīng)的微信小程序的key.
//加載即引入百度地圖
onLoad: function () {
//引入百度地圖對象
var that = this;
var BMap = new bmap.BMapWX({
ak: 'OGwPpKV6Y6GiLb3***'
});
var fail = function (data) {
console.log(data)
};
//獲取POI數(shù)據(jù)
this.getMarkers()
},
- 調(diào)用API數(shù)據(jù)接口
//調(diào)用API數(shù)據(jù)接口
getMarkers() {
var that = this;
wx.request({
url: 'https://test.com/data/api/marker.json',
method: "GET",
success: function (res) {
wxMarkerData = res.data.data
//console.log(wxMarkerData)
that.setData({
markers: wxMarkerData,
latitude: wxMarkerData[0].latitude,
longitude: wxMarkerData[0].longitude
});
},
fail: function (err) {
console.log(err)
}
})
},
數(shù)據(jù)格式如下：
5. 彈窗及導(dǎo)航事件函數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-432613.html
//點(diǎn)擊顯示信息,調(diào)整為新窗口
showSearchInfo: function (data, i) {
wx.showModal({
title: data[i].title,
content: data[i].address,
showCancel: true, //是否顯示取消按鈕
cancelText: "關(guān)閉", //默認(rèn)是“取消”
cancelColor: '#000', //取消文字的顏色
confirmText: "導(dǎo)航", //默認(rèn)是“確定”
confirmColor: '#000', //確定文字的顏色
success(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊導(dǎo)航')
let latitude = parseFloat(data[i].latitude)
let longitude = parseFloat(data[i].longitude)
let name = data[i].title
let address = data[i].address
wx.openLocation({
latitude,
longitude,
name,
address,
scale: 18
})
} else if (res.cancel) {
console.log('用戶點(diǎn)擊關(guān)閉')
}
}
})
},
- 單擊更換圖標(biāo)函數(shù)
//單擊更換圖標(biāo)
changeMarkerColor: function (data, id) {
var that = this;
var markersTemp = [];
for (var i = 0; i < data.length; i++) {
if (i === id) {
data[i].iconPath = "../../img/marker_yellow.png";
} else {
data[i].iconPath = "../../img/marker_red.png";
}
markersTemp[i] = data[i];
}
that.setData({
markers: markersTemp
});
}
（二）渲染層index.wxml
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
（三）樣式表index.wxss
.map_container{
height: 100vh;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}
@漏刻有時文章來源地址http://www.zghlxwxcb.cn/news/detail-432613.html
到了這里，關(guān)于微信小程序?qū)W習(xí)實(shí)錄3(環(huán)境部署、百度地圖微信小程序、單擊更換圖標(biāo)、彈窗信息、導(dǎo)航、支持騰訊百度高德地圖調(diào)起)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
