今天做了一个信息流落地页,其中底部需要镶嵌一个百度地图,按照正常的流程,首先是打开「百度地图开放平台」(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展现地图的级别,默认为视觉最优级别。可选

srcappName。必选

高德地图

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


您的大名:
万水千山总是情,给个打赏行不行。 打赏