H5端調起百度地圖、騰訊地圖app

時間 2019-11-25

標籤 h5 百度地圖騰訊 app 欄目騰訊简体版

原文原文鏈接

來自一個需求的總結；html

在微信公衆號中根據地圖上的marker和label，或者搜索結果點擊調起地圖APP進行導航。api

一開始是使用百度地圖進行開發，後面轉騰訊是由於微信不容許不是自家或者合做方的APP在微信自帶瀏覽器中喚起。（這裏吐槽一下微信，這麼搞算壟斷嗎？還有騰訊地圖有多渣內心沒點B數嗎？用戶使用量就是一個很好的證實！）瀏覽器

首先：微信

百度地圖Marker打點及label並添加對應點擊事件

給百度地圖添加了maker，label及對應的點擊事件，若是須要建立多個marker和label；從第二行建立地址解析器示例處循環遍歷就行了。閉包

這裏點擊的時候會調用百度地圖 URI接口喚起百度地圖APP，用戶若是安裝有會提示打卡外部APP，沒安裝就提示下載。iOS、安卓端親測有效。函數

可是百度地圖導航有個很差的是要起始位置的經緯度，這裏先獲取本地經度度再使用駕車導航。學習

ps:demo中一些變量替換成本身的就能夠了。spa

 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&region=${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&region=${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文檔還有社區。。。code

騰訊地圖URI導航的時候H5端有個好處就是，不寫出發from字段的話默認使用當前地址，可是也只有在h5端能定位獲得。pc端開發的時候會提示定位不到。百度地圖則pc/h5端打開的時候都能定位獲得。htm

 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  }