1. 程式人生 > 實用技巧 >uniapp (IOS端安卓端)呼叫高德、百度、騰訊地圖導航

uniapp (IOS端安卓端)呼叫高德、百度、騰訊地圖導航

不僅適用於uniapp、vue以及微信小程式和普通手機h5應用都適用,親測有效

直接上程式碼:

// 點選某個地方,調起下面的方法
			// 方法要傳入需要標註地點的緯度latitude,經度longitude,名字name
			toMapAPP(latitude,longitude,name){
						    let url = "";
						    if (plus.os.name == "Android") {//判斷是安卓端
								plus.nativeUI.actionSheet({//選擇選單
								    title: "選擇地圖應用",
								    cancel: "取消",
								    buttons: [{title: "騰訊地圖"},{title: "百度地圖"}, {title: "高德地圖"}]
								}, function(e) {
								    switch (e.index) {
										//下面是拼接url,不同系統以及不同地圖都有不同的拼接欄位
								        case 1:
										    //注意referer=xxx的xxx替換成你在騰訊地圖開發平臺申請的key
								            url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								            break;
								        case 2:
								            url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								            break;
										case 3:
										    url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
											break;
								        default:
								            break;
								    }
								    if (url != "") {
								        url = encodeURI(url);
										//plus.runtime.openURL(url,function(e){})調起手機APP應用
								        plus.runtime.openURL(url, function(e) {
								            plus.nativeUI.alert("本機未安裝指定的地圖應用");
								        });
								    }
								})
						    } else {
						        // iOS上獲取本機是否安裝了百度高德地圖,需要在manifest裡配置
								// 在manifest.json檔案app-plus->distribute->apple->urlschemewhitelist節點下新增
								//(如urlschemewhitelist:["iosamap","baidumap"])  
						        plus.nativeUI.actionSheet({
						            title: "選擇地圖應用",
						            cancel: "取消",
						            buttons: [{title: "騰訊地圖"},{title: "百度地圖"}, {title: "高德地圖"}]
						        }, function(e) {
						            switch (e.index) {
						                case 1:
						                    url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
						                    break;
						                case 2:
						                    url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
						                    break;
										case 3:
										    url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
											break;
						                default:
						                    break;
						            }
						            if (url != "") {
						                url = encodeURI(url);
						                plus.runtime.openURL(url, function(e) {
						                    plus.nativeUI.alert("本機未安裝指定的地圖應用");
						                });
						            }
						        })
						    }
						}
當然,這只是拉起APP的操作,如果您想拉起APP並進入相關的模式,比如線路規劃,騎行導航等,只需要將相關引數傳入,並更改相關的URL值即可。在此提供一下高德地圖的相關教程:
https://lbs.amap.com/api/amap-mobile/guide/ios/route