H5端调起百度地图、腾讯地图app
来自一个需求的总结;
在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航。
一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在微信自带浏览器中唤起。(这里吐槽一下微信,这么搞算垄断吗?还有腾讯地图有多渣心里没点B数吗?用户使用量就是一个很好的证明!)
首先:
百度地图Marker打点及label并添加对应点击事件
给百度地图添加了maker,label及对应的点击事件,如果需要创建多个marker和label;从第二行创建地址解析器示例处循环遍历就好了。
这里点击的时候会调用百度地图 URI接口唤起百度地图APP,用户如果安装有会提示打卡外部APP,没安装就提示下载。iOS、安卓端亲测有效。
但是百度地图导航有个不好的是要起始位置的经纬度,这里先获取本地经度度再使用驾车导航。
ps:demo中一些变量替换成自己的就可以了。
1 let map = new BMap.Map("baseMap"); 2 // 创建地址解析器实例 3 var myGeo = new BMap.Geocoder(); 4 // 将地址解析结果显示在地图上,并调整地图视野 5 myGeo.getPoint(type.address, function(point){ 6 if (point) { 7 map.centerAndZoom(point, 11); 8 let marker = new BMap.Marker(point); 9 map.addOverlay(marker); 10 marker.addEventListener("click", function(e) { 11 window.location.href=`http://api.map.baidu.com/direction?origin=latlng:${loca.point.lat},${loca.point.lng}|name:我的位置&destination=${type.address}&mode=driving®ion=${loca.city}&output=html`; 12 console.log('click ' + type.address) 13 }); 14 var label = new BMap.Label(type.userName,{offset:new BMap.Size(20,-10)}); 15 label.addEventListener("click", function(e) { 16 window.location.href=`http://api.map.baidu.com/direction?origin=latlng:${loca.point.lat},${loca.point.lng}|name:我的位置&destination=${type.address}&mode=driving®ion=${loca.city}&output=html`; 17 console.log('click ' + type.address) 18 }); 19 marker.setLabel(label) 20 }else{ 21 console.log("您选择地址没有解析到结果!"); 22 } 23 }, type.city); 24
腾讯地图Marker打点及label并添加对应点击事件
腾讯地图多个打点和百度地图不一样的是,循环遍历的时候腾讯地图要使用一个闭包的独立空间。这个官方并没有给出demo后面在网上找到的,这里不禁吐槽一下腾讯地图的demo文档还有社区。。。
腾讯地图URI导航的时候H5端有个好处就是,不写出发from字段的话默认使用当前地址,但是也只有在h5端能定位得到。pc端开发的时候会提示定位不到。百度地图则pc/h5端打开的时候都能定位得到。
1 let map = new qq.maps.Map(document.getElementById('baseMap'), { 2 disableDefaultUI: true, 3 zoom: 12 4 }); 5 var infoWin = new qq.maps.InfoWindow({ 6 map: map 7 }); 8 9 for(let type of markerList) { 10 (function(address, name) { 11 let geocoder = new qq.maps.Geocoder(); 12 geocoder.getLocation(address); 13 //设置服务请求成功的回调函数 14 geocoder.setComplete(function(result) { 15 let latLng = new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng); 16 map.setCenter(latLng) 17 18 let marker=new qq.maps.Marker({ 19 position: latLng, 20 animation: qq.maps.MarkerAnimation.DROP, 21 map: map 22 }); 23 let label = new qq.maps.Label({ 24 position: latLng, 25 map: map, 26 offset: new qq.maps.Size(13, -38), 27 style: {padding: "1px 5px",borderRadius: "5px",border: "1px solid #D7290F", zIndex: 99}, 28 content: name 29 }); 30 qq.maps.event.addListener(marker, 'click', function(e) { 31 console.log(e, + '----' + marker.getPosition()) 32 window.location.href=`http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${address}&policy=0&referer=educationBase`; 33 }) 34 qq.maps.event.addListener(label, 'click', function(e) { 35 console.log(e, + '----' + label.getPosition()) 36 window.location.href=`http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${address}&policy=0&referer=educationBase`; 37 }) 38 39 40 }); 41 //若服务请求失败,则运行以下函数 42 geocoder.setError(function() { 43 console.log("出错了,请输入正确的地址!!!"); 44 }); 45 })(type.address, type.userName); 46 47 }
还有另一个没用到的高德地图其实也是用URI唤起APP。官方文档也很充足,单项目一开始的时候被要求用百度地图所以没有进行深入探讨。欢迎大家一起相互学习。