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

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

----------------------------------------------------------------------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.腾讯地图的经纬度和百度的相同,苹果自带地图的经纬度和高德相同。

原文地址:https://blog.51cto.com/9334358/2447065

时间: 2024-10-29 19:09:04

APICloud打开三方地图整合(百度,高德,腾讯,苹果自带)的相关文章

ionic3 应用内打开第三方地图导航 百度 高德

1.安装检测第三方APP是否存在的插件 cordova plugin add cordova-plugin-appavailability --save npm install --save @ionic-native/app-availability                   这个可以根据项目的版本兼容性选择安装固定的版本号 我安装的是@3.4.2 在页面引入 AppAvailability 并进行判断  因为ios和android的包名不一样 所以进行了判断 import { Ap

地图转换之高德、百度

最近碰到需要把服务器拿到的百度坐标系的经纬度转换成高德地图的坐标系,然后各自查询资料终于整理出来了,下面是综合一下网上的资料做的终结,有不对的地方望指正: 1.国内各地图API坐标系统比较 参考http://rovertang.com/labs/map-compare/ 结论是: API 坐标系 百度地图API 百度坐标 腾讯搜搜地图API 火星坐标 搜狐搜狗地图API 搜狗坐标* 阿里云地图API 火星坐标 图吧MapBar地图API 图吧坐标 高德MapABC地图API 火星坐标 灵图51d

移动互联风口频现,百度高德谁已手握地图关键钥匙

随着有车一族的增多,地图的重要性日益凸显,当前国内地图市场竞争已经变得越发激烈.近来,百度地图与高德地图皆在多个与地图.出行.LBS.生活等相关的领域谋篇布局.4月19日,百度地图公布国际化战略,宣布将在2016年增加150个国家和地区的上线,吹响加速海外扩张的号角:此外,百度地图还与国内第一汽车厂商长安就智慧汽车达成战略合作,并在春季上线了近150个景点的踏青全景地图.而高德地图也开始谋求入局车联网产业. 旁观两大地图厂商的战略布局,我们不难判断出地图的未来发展之匙究竟掌握在谁的手中. 战略定

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

iOS应用内跳转百度高德苹果地图

移动开发经常用到基于位置的一些导航功能,但是对于对导航功能依赖性不强的的应用,我们直接采用应用外跳转地图APP即可. 但是应用间跳转,首先需要设置白名单, 在iOS 9 下涉及到平台客户端跳转,系统会自动到项目info.plist下检测是否设置平台Scheme,对于需要配置的平台,如果没有配置,将无法正常跳转平台客户端,因此需要配置Scheme名单.本文我们需要添加百度地图和高德地图的scheme白名单. 具体方法:在项目的info.plist中添加LSApplicationQueriesSch

百度高德争霸背后:基因、使命以及未来

上周末,高德地图和百度地图的一场"撕逼",再一次震动了整个行业.如果我没记错的话,这应该是高德和百度的第三季"开撕",前两次一是因为"免费之争",二是因为"拦截之争". 这一次双方在市场份额这个层面上争吵不休,并且摆明了"不争出个高下,决不善罢"的态度,背后原因其实很值得玩味.现在,双方"撕逼"的热度已逐渐冷却下来,作为一个旁观者,我们就来看看百度地图和高德地图有何本质不同,以及为什么这

ThinkPHP整合百度Ueditor图文教程

ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL 他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话! 在调用编辑器的时候首先先初始化一些值: <script type="text/javascript" charset="utf-8"> window.UEDITOR_HOME_U

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

ThinkPHP整合百度Ueditor

ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话!在调用编辑器的时候首先先初始化一些值: 1 <script type="text/javascript" charset="utf-8"> 2 window.UEDITOR_HOME_URL = "/Public/ued