首先我的需求是将小程序的页面转uniapp，在通过uniapp转h5，最后嵌套在app中
这里使用的地图是小程序使用腾讯地图的sdk,不过要加个跨域的配置，在h5中才能正常的使用，不然会报跨域的问题
1、先在腾讯地图申请，拿到key
2、下载小程序使用的sdk
3、这里使用的是vue，所以下载vue-jsonp进行跨域，在我的另一篇文章中有，就不过多介绍了
4、将下载的sdk进行添加内容
/**
*这里是添加的部分
*/
import { jsonp } from 'vue-jsonp'
var wx = {
request(obj){
obj.data.output = 'jsonp'
jsonp(obj.url,obj.data)//这里进行跨域
.then(json => {
if(json.status == 0){
obj.success(json) ;//注意要看看535行，源码要的数据格式是res.data所以这里用data包裹下{data:json}
}else {
obj.fail(json);//{data:json}
}
})
.catch(err => {
obj.fail(err)
})
}
}
/**后面是下载的sdk的内容，正常不变就行*/
- 注意： 要是使用的是uniapp的话，sdk中使用了wx.request,这个可能在转h5的时候，有问题，可以将sdk中的wx.request替换成uni.request就可以了，上面声明的wx={}替换为uni={}就可以了
5、页面中正常的按照腾讯地图的使用方式就可以
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js'
onLoad(){
const qqmapsdk = new QQMapWX({
key: '这里是你申请的key',
})
qqmapsdk.reverseGeocoder({
location: {
latitude,
longitude
},
success: function (res) {
console.log(res);
const locationCity = res.result.address_component.city;
//定位成功获取区域信息
},
fail: function (res) {
console.log(res);
//定位失败获取默认的区域信息
},
complete: function (res) {
console.log(res);
}
});
}
使用uniapp的要在设置里填写上key
image.png
