怎么优化iOS内嵌H5页面调用地图导航?
现在存在的问题,H5传过来起点和目标经纬度、名称等,再由原生代码拼接scheme跳转地图app,非常不灵活,存在问题只能发版本修复。
解决思路:把拼接工作交给H5,原生只提供工具方法,接收url,然后打开url。
第一中思路
lvJSActionSheet:
传参数信息
调用 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,又可以顺利的跳转