uniapp h5 & 小程序使用腾讯地图组件

leokim / / Javascript, 前端, 技术

项目需求使用uniapp 在小程序和h5端使用地图并支持选点

遇到以下问题：

小程序内运行<iframe>会是空的

使用web-view 组件传入腾讯地图的src后也不行

没有办法只能去做适配 零散代码如下:

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 小程序特有相关 */
"mp-weixin": {
    "appid": "U appid xxxxxxxxx",
    "setting": {
        "urlCheck": false,
        "es6": true
    },
    "usingComponents": true,
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        }
    },
    "plugins": {
        "chooseLocation": {
            "version": "1.0.5",
            "provider": "wx76a9a06e5b4e693e"
        }
    }
},

H5端选点后，获取到选点坐标内容 做相关处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//url https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G&referer=myapp
 
<uni-popup ref="popup" type="bottom" class="buttom_popup">
    <iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0></iframe>   
</uni-popup>
 
onLoad: function(e) {
      //#ifdef H5
      window.addEventListener('message', function(event) {
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {
            that.changeLoc(loc);
        }
      }, false);
      //#endif
},

小程序端引入组件，初始化

1
2
3
4
5
6
7
8
9
10
onShow: function(){
    //#ifdef MP-WEIXIN
    const chooseLocation = requirePlugin('chooseLocation')
    const location = chooseLocation.getLocation() // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    console.log("您所选择的位置：", location)
    if(location){
        //拿到选点后做相关逻辑处理
    }  
    //#endif
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//part view 
<input @click="open" disabled="true" name="coordinates" class="uni-input" placeholder="地图坐标" v-model="formData.coordinates"/>
 
//part function
open(){
    //#ifdef H5
    //如果是h5 通过popup层打开iframe窗口调用地图组件
    this.$refs.popup.open()
    //#endif
     
    //#ifdef MP-WEIXIN
    //如果是小程序 调用function 跳转地图页面选点 选点后会回到本，在onShow里接收选点信息，再做相关逻辑处理
    this.getAddress();
    //#endif
     
},
getAddress() {
    const key = 'U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G' //使用在腾讯位置服务申请的key
    const referer = 'Leo' //调用插件的app的名称
     
    //初始化选点坐标 
    const location = JSON.stringify({
        latitude: xxxxxx,
        longitude: xxxxxxx
    })
 
    wx.navigateTo({
        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location
    });
},