zoukankan      html  css  js  c++  java
  • 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.腾讯地图的经纬度和百度的相同,苹果自带地图的经纬度和高德相同。

  • 相关阅读:
    Flux 是什么?
    看深度学习框架排名第一的TensorFlow如何进行时序预测!
    时间序列ARIMA模型预测方法,及相关函数使用方法介绍
    解决MATLAB在K-means提示“KMEANS does not accept complex data.”错误
    机器学习——朴素贝叶斯分类器
    K-近邻分类法及tabulate、rng、categorical、varfun、discretize函数用法介绍
    灰色预测模型及MATLAB实例
    数学建模——预测模型简介
    支持向量机(SVM)MATLAB 实例讲解,及选择训练方式使误差率尽可能减为0
    批量修改文件后缀名,文件批量排序
  • 原文地址:https://www.cnblogs.com/APICloud/p/11776835.html
Copyright © 2011-2022 走看看