1. 程式人生 > >在js或者App中,調起第三方地圖產品(URI API)的彙總

在js或者App中,調起第三方地圖產品(URI API)的彙總

URI API是為開發者提供直接調起第三方地圖產品Web地圖地圖手機客戶端)以滿足特定業務場景下應用需求的程式介面,開發者只需按照介面規範構造一條標準的URI,便可在PC和移動端瀏覽器或移動開發應用中調起第三方地圖產品,進行地圖展示和檢索、線路查詢、導航等功能,無需進行復雜的地圖功能開發。

一、百度地圖URI API

地圖調起API,官方連線地址:http://lbsyun.baidu.com/index.php?title=uri

a、實現原理

在百度地圖的清單檔案中對主頁面設定了

android:scheme="baidumap"

android:host="map"屬性.指定了接受Urischeme
baidumaphostmap。當接收到指定Uri後,在主介面中對Uri進行解析和業務拆分,實現功能的呼叫。其中nativeschemebaidumaphostmap webschemebdapphostmap

b、使用方法

第三方APP在使用該型別介面時,手機中需要安裝Android百度地圖,同時需要拼寫符合協議規範的Uri串,通過srartActivity的方式進行呼叫。示例如下

Intent i1 =newIntent();// 駕車導航

i1.setData(Uri.parse("baidumap://map/navi?query=故宮"));

startActivity(
i1);//網頁應用調起Android百度地圖方式舉例<a href="bdapp://map/navi?query=故宮">駕車導航</a>

二、高德地圖URI API

地圖調起API,官方連線地址:http://lbs.amap.com/api/amap-mobile/summary/

如果您需要在瀏覽器中開啟高德地圖App,例如在H5頁面中跳轉到高德地圖App,或者在本地App中載入的H5頁面跳轉到高德地圖App,需要使用scheme呼叫,在H5中的連結中加入高德地圖的Scheme即可,如(以導航為例):

<a href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=36.547901&amp;lon=104.258354&amp;dev=1&amp;style=2">導航</a>

如果您需要在本地App中開啟高德地圖App,這種場景即在本地App中通過Java程式碼呼叫高德地圖頁面功能,此時就需要使用 Intent呼叫。同樣以導航功能為例:

Java
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.addCategory(Intent.CATEGORY_DEFAULT);

//將功能Scheme以URI的方式傳入data
Uri uri = Uri.parse("androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=36.547901&amp;lon=104.258354&amp;dev=1&amp;style=2");
intent.setData(uri);

//啟動該頁面即可        
startActivity(intent);

三、騰訊地圖URI API

地圖調起URI,官方連結地址:http://lbs.qq.com/uri_v1/index.html

已支援: Web / Wap 版騰訊地圖產品,即將支援:Android / iOS版騰訊地圖。

四、蘋果地圖

http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino

詳細官方介面說明:

五、谷歌地圖

對於Android,是通過Intent形式開啟Native Map.

Intent intent=new Intent(Intent.ACTION_VIEW);  
String url = "https://maps.google.com/maps?q=31.207149,121.593086(金科路)&z=17&hl=en";  
Uri uri = Uri.parse(url);  
intent.setData(uri);  
startActivity(intent);  

詳細官方Intent介面說明:

六、JS呼叫示例程式碼 nav.js

//獲取瀏覽器資訊
var browser = {
ua : function() {
var u = navigator.userAgent;
var isChrome = u.match(/Chrome\/([\d.]+)/)
|| u.match(/CriOS\/([\d.]+)/);
var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);
var iosVersion = function() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [ parseInt(v[1], 10), parseInt(v[2], 10),
parseInt(v[3] || 0, 10) ];
}
}();
var chromeVersion = function() {
var chrome = navigator.userAgent.match(/Chrome\/(\d+)\./);
if (chrome) {
return parseInt(chrome[1], 10);
}
}();
var ios9 = iosVersion && iosVersion[0] >= 9;
var chrome18 = isChrome && isAndroid && chromeVersion
&& chromeVersion > 18;
return { // 移動終端瀏覽器版本資訊
trident : u.indexOf('Trident') > -1, // IE核心
presto : u.indexOf('Presto') > -1, // opera核心
webKit : u.indexOf('AppleWebKit') > -1, // 蘋果、谷歌核心
gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐核心
mobile : !!u.match(/AppleWebKit.*Mobile.*/), // 是否為移動終端
iOS : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios終端
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android終端或uc瀏覽器
iPhone : u.indexOf('iPhone') > -1, // 是否為iPhone或者QQHD瀏覽器
iPad : u.indexOf('iPad') > -1, // 是否iPad
webApp : u.indexOf('Safari') == -1, // 是否web應該程式,沒有頭部與底部
weChat : u.indexOf('MicroMessenger') > -1,
UC : u.indexOf('UCBrowser') > -1,
u3 : u.indexOf('U3') > -1,
chrome : u.indexOf('Chrome') > -1,
windowsPhone : u.indexOf("Windows Phone") > -1,
samsung : u.indexOf("Samsung") > -1,
QQ : (u.match(/\sQQ/i) != null ? u.match(/\sQQ/i).toLowerCase() == " qq"
: false),
isChrome : isChrome,
isAndroid : isAndroid,
iosVersion : iosVersion,
chromeVersion : chromeVersion,
ios9 : ios9,
chrome18 : chrome18
};
}()
}
var ua = browser.ua;

// 開啟地圖App,開始導航
function openMapApp(lat, lng, addr) {
// 地圖uri api陣列
var uri = new Array();
if (ua.android) {
// 百度地圖uri api
uri[0] = "bdapp://map/navi?location=" + lat + "," + lng + "&query="
+ addr;
// 高德地圖uri api
uri[1] = "androidamap://navi?sourceApplication=xlwx&poiname=" + addr
+ "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";
// 騰訊地圖uri api
uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng
+ ";title:" + addr + "&referer=xlwx";
} else if (ua.iOS) {
// 百度地圖uri api
uri[0] = "baidumap://map/navi?location=" + lat + "," + lng + "&query="
+ addr;
// 高德地圖uri api
uri[1] = "iosamap://navi?sourceApplication=xlwx&poiname=" + addr
+ "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";
// 騰訊地圖uri api
uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng
+ ";title:" + addr + "&referer=xlwx";
// 蘋果地圖uri api
uri[3] = "http://maps.apple.com/?sll=" + lat + "," + lng + "&address="
+ addr;
}
//呼叫uri
if(uri.length == 0){
return;
}
window.location.href = uri[0];
//啟動定時器time1
var time1 = setTimeout(function() {
// 若啟動應用,則js會被中斷較長時間,超出此範圍
window.location.href = uri[1];
}, 2000);
//啟動定時器time2
var time2 = setTimeout(function() {
// 若啟動應用,則js會被中斷較長時間,超出此範圍
window.location.href = uri[2];
}, 4000);
//清除定時器
window.beforeunload = function() {
if(time1 != null){
clearTimeout(time1);
}
if(time2 != null){
clearTimeout(time2);
}
}
window.pagehide = function() {
if(time1 != null){
clearTimeout(time1);
}
if(time2 != null){
clearTimeout(time2);
}
}
window.onblur = function() {
if(time1 != null){
clearTimeout(time1);
}
if(time2 != null){
clearTimeout(time2);
}
}
}

完!!!