浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。免费对广大用户开放。

简介

百度地图API支持丰富的图层展示,除了支持在“叠加图层页面”介绍的交通流量图层,还支持图片、栅格图,可以根据自己的实际情况实现自定义栅格图层和自定义图层

同时,LBS云服务提供海量位置数据的实时存储功能,JavaScript API还支持将用户上传到LBS云里的位置数据实时渲染成图层,叠加到地图上。

基础知识——百度地图坐标系

在使用自定义方式叠加图层之前,您需要先了解百度地图的地图坐标系。 百度地图坐标系涉及:

经纬度球面坐标系统

经纬度球面坐标系统

图块编号系统
XY经纬度球面坐标系统
经纬度是一种利用三维空间的球面来定义地球上的空间的球面坐标系,它能够标示地球上任何一个位置。

通过伦敦格林尼治天文台原址的经线为0度经线,从0度经线向东、向西各分180度。赤道为0度纬线,赤道以北的纬线称为北纬、以南的称为南纬。

在百度地图中,东经和北纬用正数表示,西经和南纬用负数表示。例如北京的位置大约是北纬39.9度,东经116.4度,那么用数值标示就是经度116.6,纬度39.9。

在百度地图中,习惯经度在前,纬度在后,例如:

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标,经度在前,纬度在后
XY墨卡托平面坐标系统
由于百度地图是显示在平面上的,因此在地图内部系统中需要将球面坐标转换为平面坐标,这个转换过程称为投影。

百度地图使用的是墨卡托投影。墨卡托平面坐标如下图所示,平面坐标与经纬度坐标系的原点是重合的。

jsguide05.jpg

XY图块编号系统
百度地图在每一个级别将整个地图划分成若干个图块,通过编号系统将整个图块整合在一起以便显示完整的地图。当地图被拖动或者级别发生变化时,地图API将会根据平面坐标计算出当前视野内所需显示的图块的编号。

百度地图图块编号规则如下图所示:

jsguide06.jpg

从平面坐标原点开始的右上方向的图块编号为0,0,以此类推。在最低的缩放级别(级别 1)中,整个地球由4张图块组成。随着级别的增长,地图所使用的图块个数也随之增多。

添加自定义图层

通过TileLayer类开发者可以实现自定义图层。

自定义图层使用方法详情请见类参考
1定义取图规则
TileLayer实例的getTilesUrl方法需要实现,用来告诉API取图规则。

getTilesUrl方法的参数包括tileCoord和zoom,其中tileCoord为图块的编号信息,zoom为图块的级别,每当地图需要显示特定级别的特定位置的图块时就会自动调用此方法,并提供这两个参数。

使用者需要告知API特定编号和级别所对应的图块的地址,这样API就能正常显示自定义的图层了。

2添加和移除自定义图层
以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层,使用浮动红色小水滴表示图块的轮廓。
var map = new BMap.Map("l-map");          // 创建地图实例     
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标     
map.centerAndZoom(point,15);                  // 初始化地图,设置中心点坐标和地图级别     
var tilelayer = new BMap.TileLayer();         // 创建地图层实例    
tilelayer.getTilesUrl=function(){             // 设置图块路径     
    return "layer.gif";      
};      
map.addTileLayer(tilelayer);                // 将图层添加到地图上
用户数据图层

百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层,然后通过CustomLayer对象叠加到地图上。目前LBS云支持用户存储poi数据,存储的字段除经纬度坐标外还包括名称、地址等属性信息。CustomLayer类提供读取LBS云数据接口,并自动渲染用户数据生成数据图层,同时提供单击叠加图层返回poi数据的功能。大致流程如下:

jsdev9_madian.jpg

用户数据上传

用户数据的上传有两种方式,分别是HTTP接口上传方式、可视化标注方式。

1. HTTP接口上传方式:HTTP接口方式首先需要创建数据存储空间(databox),然后再上传用户的poi数据。创建存储空间及poi发送的是POST请求,可以借助chrome浏览器下的Postman插件可视化发送请求。

2. 可视化标注方式:用户进入云存储编辑页面后设置标注模式进行poi数据的录入。该方式的特点是简单、直观,但是数据量大时效率低下。

开发者可以通过接口形式(LBS云存储服务)或使用数据管理平台编辑管理您的个人数据,用于前端地图绘制展示自己的数据。

用户数据图层展示
1叠加用户数据图层
CustomLayer构造函数可以通过接收数据存储空间id(geotable id)参数生成用户数据图层,存储空间id可以在创建数据存储时获得。

示例代码如下:

//根据daboxId创建自定义图层,用户可用自己创建的geotableid替换30960  
var customLayer=new BMap.CustomLayer({  
    geotableId: 30960,   
    q: '', //检索关键字  
    tags: '', //空格分隔的多字符串  
    filter: '' //过滤条件,参考http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch  
});

将用户自定义图层添加到地图上的方法跟添加Tilelayer对象方式相同,即:

map.addTileLayer(customLayer);//添加自定义图层 

以下是将北京火车票代售点图层叠加在地图上的展示效果:

jsdev9_madian_demo.png

用户数据的麻点展示示例,请体验

2用户数据图层事件
JSAPI提供单击用户数据图层事件,并支持返回点击poi点的信息。

代码如下:

customLayer.addEventListener('onhotspotclick',callback);//单击图层事件  
function callback(e)//单击热点图层  
{  
    var customPoi = e.customPoi,  //获取poi对象  
        str = [];  
        str.push("address = " + customPoi.address);  
        str.push("phoneNumber = " + customPoi.phoneNumber);  
        var content = '<p style="width:280px;margin:0;line-height:20px;">地址:' + customPoi.address + '<br>电话:' + customPoi.phoneNumber + '</p>';  
        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {  //带检索的信息窗口  
            title: customPoi.title, //标题  
            width: 290, //宽度  
            height: 40, //高度  
            panel : "panel", //检索结果面板  
            enableAutoPan : true, //自动平移  
            enableSendToPhone: true, //是否显示发送到手机按钮  
            searchTypes :[  
                BMAPLIB_TAB_SEARCH,   //周边检索  
                BMAPLIB_TAB_TO_HERE,  //到这里去  
                BMAPLIB_TAB_FROM_HERE //从这里出发  
            ]  
        });  
        var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);  
        searchInfoWindow.open(point);}  
}
用户数据检索

除了展示用户自有数据外,利用JSAPI检索接口也可以对自有数据进行检索。

支持的检索类型包括:城市内检索、矩形区域检索和圆形区域检索。

以下以圆形检索为例,说明如何检索圆形区域的自有数据。
1用鼠标绘制圆形区域
var drawingManager = new BMapLib.DrawingManager(map, {  
//使用鼠标工具需要引入鼠标工具开源库DrawingManager_min.js及样式文件DrawingManager_min.css  
    isOpen: false, //是否开启绘制模式  
    enableDrawingTool: false, //是否显示工具栏  
    drawingToolOptions: {  
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
        offset: new BMap.Size(5, 5), //偏离值  
        scale: 0.8 //工具栏缩放比例  
    }  
});  
drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);  
drawingManager.open();
2在鼠标画圆结束事件回调函数内进行周边检索
drawingManager.addEventListener('circlecomplete', function(e) {  
    circle = e;  
    var radius= parseInt(e.getRadius()); //检索半径必须是整型  
    var center= e.getCenter();  
    drawingManager.close();  
    if (customLayer) {  
        map.removeTileLayer(customLayer);  
     }  
    localSearch.searchNearby(' ', center,radius,{customData:{databoxId: 4032}});//用新创建的databoxid替换该值  
});
以下是检索中关村周边的火车票代售点的检索结果图:

jsdev9_local_demo.png

用户数据的检索示例请体验