WEB端唤起「腾讯」「百度」「高德」地图APP的一键导航代码

今天做了一个信息流落地页，其中底部需要镶嵌一个百度地图，按照正常的流程，首先是打开「百度地图开放平台」（http://lbsyun.baidu.com/），登录账号→应用管理→我的应用→创建应用→浏览器端→获取访问应用（AK）

css样式代码

#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";height: 350px;}

地图显示代码

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<div id="allmap"></div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(坐标,坐标);
    map.centerAndZoom(point, 15);//显示层级，具体可以参考下方坐标拾取那里，层级越高地址越详细
    var marker = new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "公司名" , // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("详细地址说明", opts);  // 创建信息窗口对象 
map.openInfoWindow(infoWindow, point); //开启信息窗口
//marker.addEventListener("click", function(){map.openInfoWindow(infoWindow, point);}); //点击位置开启信息窗口
</script>

关于坐标如何获取？

打开百度拾取坐标网站（http://api.map.baidu.com/lbsapi/getpoint/index.html）直接搜索地址，然后点击具体位置即可获取坐标！

花絮

等这一些做完后，旁边同事提醒我「没这么复杂，直接用百度地图名片即可」（http://api.map.baidu.com/mapCard/setInformation.html），填写好信息直接出iframe然后引用就完事了！

一键导航代码

最后增加一个「一键导航代码」，记得替换coord、title和addr的参数

腾讯地图网页版本：

https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:34.768163,113.733526;title:蓝卡;addr:,河南省郑州市&Breferer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU&referer=tengxun&ch=uri-api&ADTAG=uri-api.other

调用腾讯地图APP:

http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:34.768163,113.733526;title:蓝卡;addr:,河南省郑州市&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp

百度地图：

http://api.map.baidu.com/marker?location=34.768163,113.733526&title=蓝卡&content=这里是蓝卡的简介&output=html&src=蓝卡的公司名字|蓝卡APP

Web版百度地图面向PC&移动端浏览器的网站应用或移动APP应用，其中PC浏览器调起的百度地图地址为：http://map.baidu.com/ 移动端调起的百度地图地址为：http://map.baidu.com/mobile/ 。

参数说明

location：lat<纬度>,lng<经度>必选

title：标注点显示标题必选

content：标注点显示内容必选

output：表示输出类型，web上必须指定为html才能展现地图产品结果。必选

coord_type：坐标类型，可选参数默认为bd09经纬度坐标。允许的值为bd09ll、bd09mc、gcj02、wgs84。bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托坐标，gcj02表示经过国测局加密的坐标，wgs84表示gps获取的坐标。

zoom：展现地图的级别，默认为视觉最优级别。可选

src：appName。必选

高德地图

<a href="https://uri.amap.com/marker?position=113.733526,34.768163&name=蓝卡">一键导航</a>

WEB端唤起「腾讯」「百度」「高德」地图APP的一键导航代码

评论已关闭