uniapp转h5并使用腾讯地图

首先我的需求是将小程序的页面转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