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.腾讯地图的经纬度和百度的相同，苹果自带地图的经纬度和高德相同。
APICloud打开三方地图整合的更多相关文章
- uni-app路径规划(打开第三方地图实现)
百度网盘链接:https://pan.baidu.com/s/1-Ys13GFcnKXB1wkJotcwMw 提取码:16gp 把js文件放在common目录下 引入: import pathP ...
- Android 打开高德地图、百度地图进行导航；打开第三方App去导航；
抽成工具类了,复制下来就能直接用了,直接看代码吧: 高德地图Url Api: http://lbs.amap.com/api/amap-mobile/guide/android/navigation ...
- PIE SDK打开网络地图数据
1. 数据介绍 网络地图数据是在线地图服务发布出来的数据,其支持数据的网络查看和传输,极大的促进了GIS的发展. 目前PIE SDK支持百度地图.谷歌地图.高德地图.天地图.Bing地图.ArcGIS ...
- iOS打开百度地图、高德地图导航
1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...
- 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
- 微信jssdk获取当前位置，以及打开微信地图
$(function() { var url = window.location.href; var userId = $("#userId").val(); // var ope ...
- ionic3 应用内打开第三方地图导航 百度 高德
1.安装检测第三方APP是否存在的插件 cordova plugin add cordova-plugin-appavailability --save npm install --save @ion ...
- 【IOS实例小计】打开google地图－web
-(void)openMaps:(id)sender{ NSString *addressText = @"1 Queen st, Auckland,NZ"; addressTex ...
- 二 、打开地图《苹果iOS实例编程入门教程》
该app为应用的功能为给你的iPhone打开google地图有效地址连接 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Si ...
随机推荐
- jps简介
java虚拟机进程状态工具-jps 功能简介 列出指定机器上的虚拟机的进程状态 命令格式 jps [ options ] [ hostid ] 其中options选项可有 选项 作用描述 -q 只输出 ...
- httpclient: Content-Length header already present问题
现象:用httpclient发送http请求时,客户端返回: org.apache.http.client.ClientProtocolException at org.apache.http.imp ...
- Python--day36--操作系统的作用；多道技术；
- P1101 走迷宫一
题目描述 大魔王抓住了爱丽丝,将她丢进了一口枯井中,并堵住了井口. 爱丽丝在井底发现了一张地图,他发现他现在身处一个迷宫当中,从地图中可以发现,迷宫是一个N*M的矩形,爱丽丝身处迷宫的左上角,唯一的出 ...
- 【t081】序列长度
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有一个整数序列,我们不知道她的长度是多少(即序列中整数的个数),但我们知道在某些区间中至少有多少个整数 ...
- Linux 内核总线注册
如同我们提过的, 例子源码包含一个虚拟总线实现称为 lddbus. 这个总线建立它的 bus_type 结构, 如下: struct bus_type ldd_bus_type = { .name = ...
- dotnet 通过 WMI 获取系统补丁
本文告诉大家如何通过 WMI 获取补丁 通过 Win32_QuickFixEngineering 可以获取系统启动的服务 下面代码只是获取补丁的 kb 字符 const string query = ...
- WPF TreeView 展开到指定节点
最近在做一个交换机管理的项目,有一个交换机的树,做树的搜索的时候 展开节点居然有点难,自己记录下来 ,以后用的到的时候可以看一下. 展开代码如下,其中 SwitchTree是treeview空间的名称 ...
- 牛客多校第三场 F Planting Trees
牛客多校第三场 F Planting Trees 题意: 求矩阵内最大值减最小值大于k的最大子矩阵的面积 题解: 矩阵压缩的技巧 因为对于我们有用的信息只有这个矩阵内的最大值和最小值 所以我们可以将一 ...
- Java8 Date API
一 .Clock 时钟 Clock类提供了访问当前日期和时间的方法,Clock是时区敏感的,可以用来取代 System.currentTimeMillis() 来获取当前的微秒数.某一个特定的时间点也 ...