H5打开第三方地图APP

2022-01-18  本文已影响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;
}

上一篇 下一篇

猜你喜欢

热点阅读