百度地图为我们提供了丰富的JSAPI以及LBS云服务等个性化数据服务,今天我们来结合百度地图LBS云服务的云检索和地图的JavaScriptAPI来完成一个查询LBS中自定义的云数据,并将数据显示到地图形成标记点的功能。
1.前往http://lbsyun.baidu.com/ 百度开发平台,准备一个百度账号,并申请为百度地图开发中心的开发者。
2.在控制台中,创建两个应用,分别是浏览器端(用于引用百度js源码)、服务端(用于访问LBS云服务)
3.在百度LBS中创建表,并在其中创建几个点数据。
表如下:
数据如下:
4.准备HTML页面,引入百度JS。代码如下:
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<title>百度地图检索LBS标点</title>
<style type="text/css">
#allmap {width: 100%;height: 700px;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zvQt16MyBq9ZVvcAPY7jtCA3aPkObTCN"></script><!-- 此处的ak使用浏览器端ak -->
<!--[if IE]>
<script src="js/html5.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<![endif]-->
</head>
<body >
<div id="allmap"></div><!-- 盛放地图 -->
</body>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//查询LBS云表中的数据
//遍历将点标记到地图
//此处的ak使用服务端ak
$.getJSON("http://api.map.baidu.com/geosearch/v3/local?ak=n8AVTwHROjlKZrnAxIMYqgUENOD2OmRt&geotable_id=175590&q=&callback=?",function(data){
console.log(data);
var contentList = data.contents;
$(contentList).each(function(index,currData){
var local = currData.location;
longitude = local[0];
latitude = local[1];
//生成覆盖点
var marker = new BMap.Marker(new BMap.Point(longitude, latitude));
//标记地图
map.addOverlay(marker);
});
map.centerAndZoom(new BMap.Point(longitude, latitude), 11); // 初始化地图,设置中心点坐标和地图级别
});
</script>
</html>
5.效果如下:
|