A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

百度地图为我们提供了丰富的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.效果如下:






您需要登录后才可以回帖 登录 | 加入黑马