APICloud打开三方地图整合百度高德腾讯苹果自带

jiezi

5 年前

一直想系统的整理打开地图的方法，今天抽时间把了百度，高德，腾讯，苹果自带地图都整理出来了，闲话不多说，直接上干货

———————————————————————-code start—————————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>apicloud 百度，高德，腾讯，苹果自带地图导航 </title>

</head>
<body>
<div>

<button id="baidu"> 打开百度地图 </button>
<button id="gaode"> 打开高德地图 </button>
<button id="tencent"> 打开腾讯地图 </button>
<button id="apple"> 打开苹果地图 </button>

</div>
</body>
<script type=”text/javascript” src=”../script/api.js”></script>
<script type=”text/javascript” src=”../script/jquery.min.js”></script>
<script type=”text/javascript”>
apiready = function(){

// 百度地图坐标
var dname = "凤凰山";
var lng = "113.857151";// 经度
var lat = "22.68097";// 纬度

$("#baidu").click(function () {open_bmap(dname, lng, lat);
})
$("#gaode").click(function () {var bd = bd_decrypt(lng, lat);
    open_amap(dname, bd.lng, bd.lat);
})
$("#tencent").click(function () {open_tmap(dname, lng, lat);
})

if(api.systemType == "ios") {$("#apple").click(function () {var bd = bd_decrypt(lng, lat);
        open_pmap(dname, bd.lng, bd.lat);
    })
}else{$("#apple").hide();}

}

// 打开百度地图
function open_bmap(dname, lng, lat) {

var uri = 'baidumap://map/direction?destination=name:'+dname+'|latlng:'+lat+','+lng+'&mode=driving&src=andr.cheyw';
api.openApp({
    uri: uri,
    iosUrl: uri
    }, function(ret, err) {console.log(JSON.stringify(err))
        if(err.msg=="Application not installed" || err.msg=="未找到可执行的应用") {alert("请先安装百度地图");
        }
       });

}

// 打开高德地图
function open_amap(dname, lng, lat) {

var uri = 'amapuri://route/plan/?dlat='+lat+'&dlon='+lng+'&dname='+dname+'&dev=0&t=0';
var iosUrl = 'iosamap://path?sourceApplication=cheyw&dlat='+lat+'&dlon='+lng+'&dname='+dname+'&dev=0&t=0';
api.openApp({
    uri: uri,
    iosUrl: iosUrl
    }, function(ret, err) {console.log(JSON.stringify(err))
        if(err.msg=="Application not installed" || err.msg=="未找到可执行的应用") {alert("请先安装高德地图");
        }
       });

}

// 打开腾讯地图
function open_tmap(dname, lng, lat) {

var uri = 'qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&to='+dname+'&tocoord='+lat+','+lng+'&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77';
api.openApp({
    uri: uri,
    iosUrl: uri
    }, function(ret, err) {console.log(JSON.stringify(err))
        if(err.msg=="Application not installed" || err.msg=="未找到可执行的应用") {alert("请先安装腾讯地图");
        }
       });

}

// 打开苹果地图
function open_pmap(dname, lng, lat) {

var uri = 'http://maps.apple.com/?q='+dname+'&daddr='+lat+','+lng+'';
api.openApp({
    uri: uri,
    iosUrl: uri
    }, function(ret, err) {console.log(JSON.stringify(ret))
        console.log(JSON.stringify(err))
       });

}

// 百度坐标转高德（传入经度、纬度）
function bd_decrypt(bd_lng, bd_lat) {

var X_PI = Math.PI * 3000.0 / 180.0;
var x = bd_lng - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return {lng: gg_lng, lat: gg_lat}

}
// 高德坐标转百度（传入经度、纬度）
function bd_encrypt(gg_lng, gg_lat) {

var X_PI = Math.PI * 3000.0 / 180.0;
var x = gg_lng, y = gg_lat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return {bd_lat: bd_lat, bd_lng: bd_lng}

}
</script>
</html>

—————————————————————————–code end————————————————————————

特别注意：
1. 高德地图 IOS 和 android 的 uri 是不一样的。
2. 不要用 api.appInstalled 去判断是否安装应用，IOS9 以上好像无法检测。
3. 仔细看 bd_decrypt，bd_encrypt 两个方法，别写反。
4. 腾讯地图的经纬度和百度的相同，苹果自带地图的经纬度和高德相同。