1.百度地图自定义图层说明

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

2.用户数据上传

用户数据的上传有两种方式:

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

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

方法二示例:

(1)进入LBS云,上传LBS数据到百度云存储。

20170404img02

(2)点击“数据管理平台”

20170404img03

(3)首先需要先创建数据存储空间(databox),创建完成后显示ID(该ID对应代码中的geotableId)

20170404img04

(4)点击“表属性管理”可以添加自定义表字段

20170404img05

(5)点击“表数据管理”可以新增或者批量新增POI数据

20170404img06

(6)保存并发布

3.用户数据图层展示

百度地图AK

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=对应该LBS云存储的用户AK"></script>

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

代码如下:

//根据daboxId创建自定义图层,用户可用自己创建的geotableid替换30960  
var customLayer=new BMap.CustomLayer({  
    geotableId: 165288,   
    q: '', //检索关键字  
    tags: '', //空格分隔的多字符串  
    filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby  
});

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

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

显示效果如下:

20170404img08

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

代码如下:

customLayer.addEventListener('onhotspotclick', callback);//单击图层事件  

function callback(e)//单击热点图层  
{
	var customPoi = e.customPoi; //获取poi对象  
	var contentPoi=e.content;//poi的自定义字段
	var content = '<p style="width:280px;margin:0;line-height:20px;">地址:' + customPoi.address + '<br>电话:' + customPoi.title + '</p>';
	alert(contentPoi.field1);//自定义字段
	alert(contentPoi.field2);
	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);
}

自定义字段值的展示

20170404img07