文章目录
- 1.导航菜单配置
- 构建导航菜单容器
- 设置取消事件
- 调起菜单样式表
- 2.地图调起事件
- 导航到这里
- 获取导航坐标
- 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
- 3.地图调起效果
地图调起功能,是地图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")
});
调起菜单样式表
默认为隐藏状态display: 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.地图调起事件
导航到这里
当用户单击导航到这里时,调用getNav(lng, lat, title, address)函数,传递当前POI点位的经纬度坐标、名称和地址,便于不同地图之间的函数使用
html.push('<div class="infoItems" style="float: right;"> <a href="' + pos.poi_order + '" target="_blank"><span class="layui-icon layui-icon-survey"> 立即预约</span></a> <a href="javascript:;" οnclick="getNav(\'' + pos.poi_lon + '\',\'' + pos.poi_lat + '\',\'' + pos.poi_name + '\',\'' + pos.poi_address + '\');"><span class="layui-icon layui-icon-find-fill"> 导航到这里</span></a></div>')
获取导航坐标
系统默认百度坐标系bd09格式,而高德和腾讯使用的是火星系坐标,为了能快速准确的使用同一个坐标实现不同地图APP的使用,需要对坐标进行格式转换。具体参加:《GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)》
- 百度地图调起格式:
http://api.map.baidu.com/geocoder?location=39.990912172420714,116.32715863448607&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo
(官方文档:https://lbsyun.baidu.com/index.php?title=uri) - 高德地图调起格式:
https://uri.amap.com/marker?position=116.473195,39.993253
(官方文档:https://lbs.amap.com/api/uri-api/guide/mobile-web/point/) - 腾讯地图调起格式:
https://apis.map.qq.com/uri/v1/marker?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口桥北铁路道口&referer=myapp
(官方文档:https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker)
具体封装方法如下:
//获取导航坐标
function getNav(lng, lat, title, address) {
var lnglat = bd09togcj02(lng, lat);
//console.log(lnglat);
//显示导航栏
$(".navi").css("display", "block");
//百度导航
$("#baidu").html('<a href="//api.map.baidu.com/geocoder?location=' + lat + ',' + lng + '&coord_type=bd09ll&output=html&src=lockdatav">百度导航</a>');
//高德导航
$("#gaode").html('<a href="//uri.amap.com/marker?position=' + lnglat[0] + ',' + lnglat[1] + '&name=' + address + '">高德导航</a>');
//腾讯导航
$("#tengxun").html('<a href="https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lnglat[1] + ',' + lnglat[0] + ';title:' + title + ';addr:' + address + '&referer=myapp">腾讯导航</a>');
}
百度坐标系 (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.地图调起效果
@漏刻有时