手机端H5地图调起开发实战案例解析（百度高德腾讯地图调起、底部弹出层、提示安装地

手机端H5地图调起开发实战案例解析（百度高德腾讯地图调起、底部弹出层、提示安装地

文章目录

地图调用函数即地图URI API手机百度地图导航，为开发者提供直接调用地图产品（手机客户端）的程序接口，满足特定业务场景下的应用需求。 开发者只需按照接口规范构造一个标准的URI，即可在PC端和移动端浏览器或移动端开发应用中调用地图产品手机百度地图导航，实现地图显示检索、路线查询、导航等功能，无需通过复杂的地图功能开发。

1.导航菜单配置构建导航菜单容器

配置百度、高德、腾讯地图的容器，调用时将HTML内容传给对应的ID。

    
    <div class="navi">
        <p id="baidu">p>
        <p id="gaode">p>
        <p id="tengxun">p>
        <p id="cancel">取消p>
    div>

设置取消事件

单击取消时，隐藏底部弹出菜单。

    //导航菜单;
    $("#cancel").click(function () {
        $(".navi").css("display", "none")
    });

调用菜单样式表

默认是 state: none;，调用时会显示。

/*导航*/
.navi {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto 0;
    width: 100%;
    height: 200px;
    background-color: #FFF;
    border-radius: 10px 10px 0 0;
    z-index: 99999;
    display: none;/*默认隐藏*/
}
.navi > p {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid rgba(139, 145, 160, 0.1);
}
.navi > p:nth-child(4) {
    border-top: 1px solid rgba(139, 145, 160, 0.1);
}

2.地图调用事件，导航到这里

当用户点击导航到这里时，调用(lng,lat,title,)函数传递当前POI点的经纬度坐标、名称和地址，方便不同地图之间函数的使用

html.push('
  + pos.poi_order + '" target="_blank"> 立即预约 + pos.poi_lon + '\',\'' + pos.poi_lat + '\',\'' + pos.poi_name + '\',\'' + pos.poi_address + '\');"> 导航到这里
')

获取导航坐标

系统默认使用百度坐标系的bd09格式，而高德和腾讯使用的是火星系统坐标。 为了快速准确的使用同一个坐标实现不同地图app的使用，需要对坐标的格式进行转换。 具体参与：《GIS数据格式坐标转换（地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系）》

具体封装方法如下：

//获取导航坐标
function getNav(lng, lat, title, address) {
    var lnglat = bd09togcj02(lng, lat);
    //console.log(lnglat);
    //显示导航栏
    $(".navi").css("display", "block");
    //百度导航
    $("#baidu").html('+ lat + ',' + lng + '&coord_type=bd09ll&output=html&src=lockdatav">百度导航');
    //高德导航
    $("#gaode").html('+ lnglat[0] + ',' + lnglat[1] + '&name=' + address + '">高德导航');
    //腾讯导航
    $("#tengxun").html('+ lnglat[1] + ',' + lnglat[0] + ';title:' + title + ';addr:' + address + '&referer=myapp">腾讯导航');
}

百度坐标系（BD-09）与火星坐标系（GCJ-02）的转换

//定义一些常量
//var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
//var PI = 3.1415926535897932384626;
var x_PI = parseFloat(3.14159265358979323846264338327950288419716939937510582097494459 * parseFloat(3000.0) / parseFloat(180.0));
var PI = 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280;
var aa = parseFloat(6378245.0);
var ee = 0.00669342162296594323;
/**
 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
 * 即 百度 转 谷歌、高德
 * @param bd_lon
 * @param bd_lat
 * @returns {*[]}
 */
var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
    var bd_lon = +bd_lon;
    var bd_lat = +bd_lat;
    var x = bd_lon - 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 [gg_lng, gg_lat]
};

3.地图调整的效果

@泄漏时间有时