[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>
