一、交代下背景
以前油耗笔记OilNote检索周边加油站功能，都是用的高德地图，起初，也不知道高德Api限制多少访问量，反正一直也没提示过超额，但是今天，莫名的收到了两条超额的短信。
一开始收到80%超额的时候也没太当回事，觉得可能这个月改版，调试用的数量比较大，但是紧接着就收到了超额100%的提示，就感觉到不太对劲了，于是登录了高德后台，查询了一下配额。
结果真是乖了个乖，搜索服务每日限额100次，这简直就是坑了，100次跟没有没啥区别，高德这是直接劝退个人开发者的节奏。
查了下站内信，2022年10月26日发的站内信（没短信），通知2022年10月27日调整限额，连给你调整的时间都不给。
坑你没商量呀。
二、百度地图
为什么选择百度地图呢？介个，国内好像除了高德就是百度了，不用也没办法。
因为我就用到了地点检索，百度地图目前还算比较良心的，个人开发者每日限额是5000次。是高德地图的50倍。并发限制都是一样的30QPS。
百度地图创建应用的时候，记得选择微信小程序，否则逆地理编码是不能用的。
三、微信公众平台配置
如果使用百度地图，必须提前把百度地图Api放到域名白名单里面。
微信小程序后台，依次定位到开发管理→开发设置→服务器域名，在request合法域名里面加上百度地图的网址
https://api.map.baidu.com
如果微信开发者工具提示域名不合法，记得刷新一下开发者工具的域名信息。
刷新后记得重新编译项目。
三、功能改造
既然决定了用百度地图，那么剩下的就是如何对程序进行改造了。
因为我的小程序是使用uniapp开发的，所以这里就介绍一下uniapp的整个的改造过程。
为了不影响在线版本，暂时先不删除高德域名。
3.1、manifest.json改造
manifest.json用于配置地图的Key，因为我之前使用的是高德的地图，切换到百度后，需要将相关配置改成百度地图的。
其实我现在只是用了微信小程序，AK我直接在代码里面写死了，这里配置的appkey我感觉没啥用，对uniapp理解不是很深入，这块可能更多的是给App用的吧。
我们Maps需要勾选百度地图并取消高德地图。
具体的key，可以在百度开放平台，个人创建的应用中找到。
3.2、获取附近加油站功能改造
其实改造也比较简单，高德跟百度Api还是比较类似的。
3.2.1、原来高德获取周边加油站的代码
let getLocation = function(radius = 1000, successFn) {
var latitude = '' //纬度
var longitude = '' //经度
if (uni.getStorageSync('position') == '') {
uni.getLocation({
geocode: true,
type: 'gcj02',
altitude: true,
accuracy: 'best',
isHighAccuracy: true,
success: (res) => {
console.log('位置是', res)
latitude = res.latitude
longitude = res.longitude
uni.setStorageSync('latitude', latitude)
uni.setStorageSync('longitude', longitude)
uni.request({
url: 'https://restapi.amap.com/v3/geocode/regeo?key=AK' +
'&location=' + longitude + ',' + latitude +
'&poitype=010100&radius=' + radius +
'&extensions=all&batch=false&roadlevel=0',
success: function(res) {
var regeocode = res.data.regeocode
// 省份名称
uni.setStorageSync('province', regeocode.addressComponent.province)
// 城市名称
uni.setStorageSync('city', regeocode.addressComponent.city)
// 城市编号
uni.setStorageSync('citycode', regeocode.addressComponent.citycode)
successFn(regeocode)
},
fail(err) {
console.log('获取加油站信息失败：' + JSON.stringify(err))
}
})
},
fail: (err) => {
console.log('获取加油站信息失败：' + JSON.stringify(err))
}
})
}
}3.2.2、百度地图获取逆地址编码（根据坐标获取位置）
let getLocation = function(radius = 1000, successFn) {
var latitude = '' //纬度
var longitude = '' //经度
uni.getLocation({
geocode: true,
type: 'gcj02',
altitude: true,
accuracy: 'best',
isHighAccuracy: true,
success: (res) => {
console.log('位置是', res)
latitude = res.latitude
longitude = res.longitude
uni.request({
url: 'https://api.map.baidu.com/geoconv/v1/?' +
'ak=您的AK（类型是服务端的）' +
'&coords=' + longitude + ',' + latitude +
'&from=3&to=5&output=json',
success: function(res) {
debugger
if (res.data.status === 0) {
longitude = res.data.result[0].x
latitude = res.data.result[0].y
uni.setStorageSync('latitude', latitude)
uni.setStorageSync('longitude', longitude)
uni.request({
url: 'https://api.map.baidu.com/reverse_geocoding/v3/?' +
'ak=您的AK（类型是小程序的）&output=json' +
'&coord_type=gcj02ll' +
'&location=' + latitude + ',' + longitude +
'&radius=' + radius,
success: function(res) {
if (res.data.status === 0) {
// 省份名称
uni.setStorageSync('province', res.data
.result.addressComponent
.province)
// 城市名称
uni.setStorageSync('city', res.data
.result.addressComponent
.city)
// 城市编号
uni.setStorageSync('citycode', res.data
.result.cityCode)
successFn(res.data, res.data.result
.addressComponent.province,
res.data.result
.addressComponent.city)
}
},
fail(err) {
console.log('获取位置信息失败：' + JSON.stringify(err))
}
})
}
},
fail(err) {
console.log('获取位置信息失败：' + JSON.stringify(err))
}
})
},
fail: (err) => {
console.log('获取位置信息失败：' + JSON.stringify(err))
}
})
}需要注意，uni.getLocation获取gcj02时的坐标适用于高德等地图，但是不适用百度地图，需要调用百度地图坐标转换接口geoconv转换成百度地图的坐标，不然会有较大的误差，同时地图转换接口使用的AK需要是服务端类型的应用的AK，也就是说我们实际上使用了两种AK，一种是服务端的，一种是小程序的。
3.2.3、百度地图获取附近加油站
let getOilStation = function(radius = 1000, successFn) {
let latitude = uni.getStorageSync('latitude') //纬度
let longitude = uni.getStorageSync('longitude') //经度
uni.request({
url: 'https://api.map.baidu.com/place/v2/search?' +
'query=充电站$加油站&ak=您的AK（类型是小程序的）&output=json' +
'&scope=2' +
'&coord_type=2' +
'&page_size=20' +
'&location=' + latitude + ',' + longitude +
'&radius=' + radius,
success: function(res) {
successFn(res)
}
})
}改造完成后验证一下
四、使用百度地图一些问题
目前切换到百度地图之后遇到的一些问题
- 搜索功能显示不全，我家附近其实就有一个中国石化，但是百度地图搜索不到，充电站搜索还算比较全的
- 不能显示图片，如果
photo_show开启，会提示授权失败。
评论 (0)