怎么优化iOS内嵌H5页面调用地图导航？

怎么优化iOS内嵌H5页面调用地图导航？

现在存在的问题，H5传过来起点和目标经纬度、名称等，再由原生代码拼接scheme跳转地图app，非常不灵活，存在问题只能发版本修复。
解决思路：把拼接工作交给H5，原生只提供工具方法，接收url，然后打开url。

首先按照 juejin.cn/post/704999… 约定好Handler

第一中思路

1. H5调用约定好的方法lvJSActionSheet：传参数信息
2. 然后由原生方法通过scheme检测安装了哪些地图App，没有安装的过滤掉
3. 然后弹出UIActionSheet，让用户选择
4. 用户选择后打开对应的App
5. 注意url包含中文需要encode才能打开

具体实现

调用lvJSActionSheet，调起来选择导航app的弹窗，参数如下 title和message可以不传

{
    "parameter": {
    "title": "地图导航",
    "message": "请选择",
    "cancelTitle": "取消",
    "actions": [
            {
                "title": "高德地图",
                "scheme": "iosamap://path?dlat=36.49279772850097&dlon=118.199697307739&dname=潭溪山风景区 &dev=0&m=0&t=0"
            },
            {
                "title": "百度地图",
                "scheme": "baidumap://map/direction?origin=我的位置&destination=name:潭溪山风景区|latlng:36.49915600,118.20610000&mode=driving"
            },
            {
                "title": "苹果地图",
                "scheme": "http://maps.apple.com/saddr=&daddr=36.49915600,118.20610000&dirflg=d"
            }
        ]
    },
    "methodName": "lvJSActionSheet",
}
复制代码

可以在浏览器控制台调试：

window.webkit.messageHandlers.lvJSCallNativeHandler.postMessage('{"parameter":{"title":"地图导航","message":"请选择","cancelTitle":"取消","actions":[{"title":"高德地图","scheme":"iosamap://path?dlat=36.49279772850097&dlon=118.199697307739&dname=潭溪山风景区&dev=0&m=0&t=0"},{"title":"百度地图","scheme":"baidumap://map/direction?origin=我的位置&destination=name:潭溪山风景区|latlng:36.49915600,118.20610000&mode=driving"},{"title":"苹果地图","scheme":"http://maps.apple.com/?saddr=&daddr=36.49915600,118.20610000&dirflg=d"}]},"methodName":"lvJSActionSheet","callbackId":"3803280"}')
复制代码

参考文档

developer.apple.com/library/arc…
lbs.amap.com/api/amap-mo…
lbsyun.baidu.com/index.php?t…

另一种思路 用通用链接打开地图导航，需要原生提供OpenUrl的方法

1、提供lvJSCanOpenURL，判断安装了哪些app

传入scheme	描述
iosamap://	判断高德
baidumap://map/direction	判断百度
weixin://	判断微信
mqq://	判断QQ

2、提供方法调用openURL打开对应的app

原生代码
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:parameterDic[@"url"]]];
复制代码

高德地图的通用链接

https://wap.amap.com/callnative/appstore.html?schema=iosamap://path?sourceApplication=mo&slat=31.237966&slon=121.4776&sname=上海付费通信息服务有限公司&dlat=31.226614&dlon=121.387506&dname=上海市儿童医院&dev=0&m=0&t=1
复制代码

需要URL encode

https://wap.amap.com/callnative/appstore.html?schema=iosamap%3A%2F%2Fpath%3FsourceApplication%3Dmo%26slat%3D31.237966%26slon%3D121.4776%26sname%3D%25E4%25B8%258A%25E6%25B5%25B7%25E4%25BB%2598%25E8%25B4%25B9%25E9%2580%259A%25E4%25BF%25A1%25E6%2581%25AF%25E6%259C%258D%25E5%258A%25A1%25E6%259C%2589%25E9%2599%2590%25E5%2585%25AC%25E5%258F%25B8%26dlat%3D31.226614%26dlon%3D121.387506%26dname%3D%25E4%25B8%258A%25E6%25B5%25B7%25E5%25B8%2582%25E5%2584%25BF%25E7%25AB%25A5%25E5%258C%25BB%25E9%2599%25A2%26dev%3D0%26m%3D0%26t%3D1
复制代码

就能打开高德app了

百度地图通用链接

https://clientmap.baidu.com/map/maplink.php?cburl=https://map.baidu.com/zt/client/index/?down=iphone&fr=webapp_callna&openapi=baidumap://map/direction?mode=transit&origin=上海大剧院&destination=今生今世KTV&coord_type=bd09mc&index=&src=webapp.bus.buslinelistpg.floatbottombannerbtn_safari
复制代码

同样需要URL encode

https://clientmap.baidu.com/map/maplink.php?cburl=https%3A%2F%2Fmap.baidu.com%2Fzt%2Fclient%2Findex%2F%3Fdown%3Diphone%26fr%3Dwebapp_callna&openapi=baidumap%3A%2F%2Fmap%2Fdirection%3Fmode%3Dtransit%26origin%3D%25E4%25B8%258A%25E6%25B5%25B7%25E5%25A4%25A7%25E5%2589%25A7%25E9%2599%25A2%26destination%3D%25E4%25BB%258A%25E7%2594%259F%25E4%25BB%258A%25E4%25B8%2596KTV%26coord_type%3Dbd09mc%26index%3D%26src%3Dwebapp.bus.buslinelistpg.floatbottombannerbtn_safari
复制代码

总结

1、通用链接感觉更流畅，不会有打开提示。 2、注意url encode 3、两种方式可以结合起来 scheme 里传入通用链接就可以了，即有了原生的ActionSheet，又可以顺利的跳转