1.百度地图自定义图层说明
百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层,然后通过CustomLayer对象叠加到地图上。目前LBS云支持用户存储poi数据,存储的字段除经纬度坐标外还包括名称、地址等属性信息。CustomLayer类提供读取LBS云数据接口,并自动渲染用户数据生成数据图层,同时提供单击叠加图层返回poi数据的功能。
2.用户数据上传
用户数据的上传有两种方式:
- HTTP接口上传方式
- 可视化标注方式
-
HTTP接口上传方式:HTTP接口方式首先需要创建数据存储空间(databox),然后再上传用户的poi数据。创建存储空间及poi发送的是POST请求,可以借助chrome浏览器下的Postman插件可视化发送请求。
-
可视化标注方式:用户进入云存储编辑页面后设置标注模式进行poi数据的录入。该方式的特点是简单、直观,但是数据量大时效率低下。
方法二示例:
(1)进入LBS云,上传LBS数据到百度云存储。
(2)点击“数据管理平台”
(3)首先需要先创建数据存储空间(databox),创建完成后显示ID(该ID对应代码中的geotableId)
(4)点击“表属性管理”可以添加自定义表字段
(5)点击“表数据管理”可以新增或者批量新增POI数据
(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);//添加自定义图层
显示效果如下:
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);
}