怎么优化iOS内嵌H5页面调用地图导航?
现在存在的问题,H5传过来起点和目标经纬度、名称等,再由原生代码拼接scheme跳转地图app,非常不灵活,存在问题只能发版本修复。
解决思路:把拼接工作交给H5,原生只提供工具方法,接收url,然后打开url。
首先按照 juejin.cn/post/704999… 约定好Handler
第一中思路
- H5调用约定好的方法
lvJSActionSheet:
传参数信息 - 然后由原生方法通过scheme检测安装了哪些地图App,没有安装的过滤掉
- 然后弹出UIActionSheet,让用户选择
- 用户选择后打开对应的App
- 注意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,又可以顺利的跳转