美文网首页
H5打开第三方地图APP

H5打开第三方地图APP

作者: 小七是外号 | 来源:发表于2022-01-18 15:52 被阅读0次

    实现思路:

    1. H5页面弹出弹窗选择

    2. 选择后跳转对应地图的H5页

    3. 让地图的H5页唤起各自的APP

    
    /**
    
        * 根据地图类型、位置获取不同的地图页面跳转链接
    
        * @param {*} mapType 地图类型
    
        * @param {*} location 经纬度 lat:纬度 lng:经度
    
        * @param {*} address 详细地址
    
        */
    
    getMapApp (mapType,location, address) {
        const { lat, lng } = location;
        let url = '';
        switch (mapType) {
            case '腾讯地图': 
                url = 'https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lat + ',' + lng + ';addr:' + address + ';title:地址&referer=keyfree';
                break;
        case '高德地图':
            url = 'https://uri.amap.com/marker?position=' + lng + ',' + lat + '&name=' + address + '&callnative=1';
            break;
        case '百度地图':
            url = 'http://api.map.baidu.com/marker?location=' + lat + ',' + lng + '&title=地址&content=' + address + '&output=html&src=webapp.reformer.appname&coord_type=gcj02';
            break;
        default:
            break;
        }
        returnurl;
    }
    
    

    相关文章

      网友评论

          本文标题:H5打开第三方地图APP

          本文链接:https://www.haomeiwen.com/subject/tlbkhrtx.html