一、获取密钥
进入百度开放平台官网,点击右上角“API控制台”,注册成为百度地图开发者。
进入控制台,创建一个新应用。填写相应信息时,应用类型选择【微信小程序】,APPID填写小程序开发者ID。
点击提交后,即可在查看应用页面看到申请成功的密钥(AK)。
二、引入JS模块
在项目根目录下新建一个路径,下载百度地图微信小程序JavaScript API,解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js ),将其拷贝到新建的路径下,安装完成。
三、设置请求合法域名
登录微信公众平台-> “开发” -> “开发管理” -> ”开发设置“-> “服务器域名”-> “request 合法域名” ->添加 https://api.map.baidu.com-> 点击"保存并提交"
打开开发者工具 -> “项目配置” -> 点击"刷新",合法域名设置同步完成
四、使用示例——地址解析
将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。主要方法:BMapWX对象的geocoding(geocodingParam: Object)
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>
<view class="rgc_info">
<view>经度:{
{longitude}}</view>
<view>纬度:{
{latitude}}</view>
</view>
<view>
<input placeholder="输入关键字" type="text" value="{
{searchText}}"
bindinput="handleInputChange"/>
<button bindtap="search">搜索</button>
</view>
js代码:
// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js'); //bmap-wx.js文件存放路径
var wxMarkerData = [];
Page({
data: {
BMap: null,
searchKeyword: '',
markers: [],
latitude: '',
longitude: '',
rgcData: {
}
},
onLoad: function() {
// 新建百度地图对象
this.data.BMap = new bmap.BMapWX({
ak: 'xxx' //百度地图密钥
});
this.toSearch("北京")
},
handleInputChange: function (e) {
this.data.searchKeyword = e.detail.value
},
search: function () {
this.toSearch(this.data.searchKeyword)
},
toSearch: function (keyword) {
let that = this;//重要,必须
let fail = function(data) {
console.log(data)
};
let success = function(data) {
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
// 发起geocoding检索请求
that.data.BMap.geocoding({
address: keyword,
fail: fail,
success: success,
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
});
}
})
wxss代码
.map_container{
height: 420px;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}
.rgc_info {
padding: 5px;
}
.rgc_info {
display: block;
}
效果:
五、功能汇总
-
POI检索:搜索附近的美食、酒店。
方法:
search(searchParam: Object)
参数 searchParam: Object 对象结构
属性名 类型 是否必须 描述 location string 否 经纬度例如:39.915,116.404 默认值为当前定位点 iconPath string 是 小程序marker图标 iconTapPath string 否 小程序点击后图标 width number 否 marker宽,默认为图片宽度 height number 否 marker高,默认为图片高度 alpha number 否 marker透明度,默认为1 query string 否 检索关键字,默认为生活服务、美食、酒店 success Function(searchSuccess) 否 检索成功后回调回调函数 fail Function(searchFail) 否 检索失败后回调函数 注:其他参数和Place API请求参数一致。
-
POI检索词联想:供匹配输入关键字的辅助信息数据,返回关键字类的相关结果。
方法:suggestion(suggestionParam: Object)
参数 suggestionParam: Object 对象结构
属性名 类型 是否必须 描述 success Function(suggestionSuccess) 否 检索成功后回调函数 fail Function(suggestionFail) 否 检索失败后回调函数 注:其他参数和Place Suggestion API请求参数一致。
-
地址解析:将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然,地址结构越完整,地址内容越准确,解析的坐标精度也会越高。
方法:
geocoding(geocodingParam: Object)
参数 geocodingParam: Object 对象结构
属性名 类型 是否必须 描述 address string 是 待解析地址,如"北京市海淀区上地十街10号" iconPath string 是 小程序marker图标 iconTapPath string 否 小程序点击后图标 width number 否 marker宽,默认为图片宽度 height number 否 marker高,默认为图片高度 alpha number 否 marker透明度,默认为1 success Function(geocodingSuccess) 否 检索成功后回调函数 fail Function(geocodingFail) 否 检索失败后回调函数 注:其他参数和Geocoding请求参数一致。
-
逆地址解析:根据经纬度获得对应的地理描述信息,默认对当前定位后的坐标进行解析,也可以在调用时指定经纬度进行解析。
方法:
regeocoding(regeocodingParam: Object)
参数 regeocodingParam: Object 对象结构
location string 否 要解析的经纬度例如:39.915,116.404 默认值为当前定位点 iconPath string 是 小程序marker图标 iconTapPath string 否 小程序点击后图标 width number 否 marker宽,默认为图片宽度 height number 否 marker高,默认为图片高度 alpha number 否 marker透明度,默认为1 success Function(regeocodingSuccess) 否 检索成功后回调函数 fail Function(regeocodingFail) 否 检索失败后回调函数 注:其他参数和Geocoding请求参数一致。
更多详情参考:微信小程序JavaScript API | 百度地图API SDK (baidu.com)
官方类参考和Demo:GitHub - baidumapapi/wxapp-jsapi: 百度地图微信小程序jsapi
六、其他注意事项
-
小程序获取定位可能需要授权,定位提示:微信小程序getLocation 需要在app.json中声明permission字段
解决方法:
在app.json文件中进行添加下面配置
"permission":{ "scope.userLocation": { "desc": "是否允许小程序获取位置信息?" } }
参考;微信小程序getLocation 需要在app.json中声明permission字段_但许星辰静月的博客-CSDN博客_getlocation需要在app.json中声明
-
官方开发指南中还有天气查询功能,经测试该方法不可用,在github更新日志中有一条:
2020.09:由于ak鉴权限制,小程序端jsapi暂不支持天气服务,可以通过webAPI天气服务调用。