百度地图开发2 --- 地图自定义数据展示

前面记录了怎么上传自定义数据, 下面说一下怎么展示数据.

其实百度api 有很多数据展示的例子, 但是只看案例到后面就会发现用案例里面的方法有很大的局限性.
我想要的是展示用户附近的网点. 第一次做是看案例比着葫芦画瓢
* 使用 var localsearch = new BMap.localSearch(map, options); 得到网点信息
* localsearch.search() 或者 localsearch.Nearby() 搜索附近的网点.
这样直接用api预设函数得到的结果:
* 百度把所有的功能给你做好了, 傻瓜式操作
* 返回的数据非常少, 自定义字段没有, 网点距离没有….

<script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap"); // 创建地图实例    var point = new BMap.Point(116.403694, 39.927552); // 创建点坐标{#  获得用户位置  #}    var geolocation = new BMap.Geolocation();    geolocation.getCurrentPosition(function(r){        if(this.getStatus() == BMAP_STATUS_SUCCESS){            var mk = new BMap.Marker(r.point);            map.addOverlay(mk);            map.panTo(r.point);{#          一会要用到point , point重新赋值为目前地图的中心#}            point = r.point;            var options = {                onSearchComplete: function(results) {{#                    alert('Search Completed');#}                    //可添加自定义回调函数                    console.log(results);{#                    在这里可以拿到查询到的数据#}                    results.vr.forEach(function (a) {                        var dis = (map.getDistance(point, a.point)/1000).toFixed(1);                        a.distance = dis;                    });                    var vr = results.vr;{#                    按照距离排序#}                    vr.sort(function (a, b) {                        var cmp = parseFloat(a.distance) >parseFloat(b.distance) ? 1:-1;                        console.log(cmp);                        return cmp;                    });                    console.log(results);                    showYYBData(vr[0]);                },                renderOptions: {                    map: map,{#                    autoViewport: true // 检索完成后自动缩放#}                },                pageCapacity:200            };            // ****从服务器平台检索出来数据******            var localSearch = new BMap.LocalSearch(map, options);            map.addEventListener("load", function() {                var circle = new BMap.Circle(point, 5000, {                    fillColor: "blue",                    strokeWeight: 1,                    fillOpacity: 0.3,                    strokeOpacity: 0.3                });                // 搜索附近的网点                localSearch.searchNearby('厕所', point, 10000, {                    customData: {                        geotableId: 前面上传数据的tableID                    }                });            });            map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别            map.enableScrollWheelZoom();            map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控            var drawingManager = new BMapLib.DrawingManager(map, {                isOpen: false, //是否开启绘制模式            });             }        else {            alert('failed'+this.getStatus());        }    },{enableHighAccuracy: true});{#  填写营业部信息#}function showYYBData(yybData) {    $('#yybName').text(yybData.title);    $('#yybAddr').text('地址: ' + yybData.address);    $('#yybDis').text('距离: ' + yybData.distance + '千米');    $('#yybPhone').text('电话: ' + yybData.phone);}</script>

显示数据很有限, 就两条.效果很不理想:

可以看出 localsearch 返回的数据本来就有限

前面的方法效果不好

• 下面改为 使用ajax 请求数据, 这样返回的数据就非常全, 然后再自己添加到百度地图

<script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap"); // 创建地图实例    var point = new BMap.Point(116.403694, 39.927552); // 创建点坐标{#  获得用户位置  #}    var geolocation = new BMap.Geolocation();    geolocation.getCurrentPosition(function(r){        if(this.getStatus() == BMAP_STATUS_SUCCESS){            var mk = new BMap.Marker(r.point);            map.addOverlay(mk);            map.disableDragging(); // 禁止拖拽            map.panTo(r.point);{#          一会要用到point , point重新赋值为目前地图的中心#}            point = r.point;            var search_url = 'http://api.map.baidu.com/geosearch/v3/nearby?ak=你的ak&geotable_id=你的tableID&location=' +                point.lng +','+ point.lat +                '&page_size=5&radius=50000&tags=搜索关键字&sortby=distance:1';{#          这里使用ajax请求数据#}            $.ajax({url:search_url,                dataType: 'jsonp',                success:function (r) {                console.log(r);                if (r.status == '0'){                    var isFirst = 0;                    r.contents.forEach(function (t){                        console.log(t.location);                        var wd = new BMap.Marker(new BMap.Point(t.location[0],t.location[1]));                        wd.customData = {                            title: t.title,                            address: t.address,                            phone: t.phone == undefined? '无':t.phone,  //营业部电话                            distance: t.distance,                            province: t.province,                            city: t.city,                            district: t.district,                            yyb: t.title,                        };                        wd.addEventListener("click", addWindow);                        map.addOverlay(wd);                        if (isFirst == 0){                            // 如果是第一个, 也就是最近的网点, 默认选中, 打开弹窗                            isFirst +=1;                            showYYBData(wd.customData);                            var infoWindow = makeInfoWindow(wd);                            map.openInfoWindow(infoWindow,wd.point);//打开信息窗口{#                            保存最近网点信息, 提交表单一并提交#}                            wd.customData.platform = navigator.platform; //用户平台信息                            window.closest_info = wd.customData;                        }                        console.log(wd);                    })                }                map.centerAndZoom(point, 11); // 初始化地图，设置中心点坐标和地图级别                map.enableScrollWheelZoom();                }            })        }        else {            alert('请允许我们获得您的位置信息, 以便帮您查找最近的网点.');        }    },{enableHighAccuracy: true});{#  填写营业部信息#}function showYYBData(yybData) {    $('#yybName').text(yybData.title);    $('#yybAddr').text('地址: ' + yybData.address);    $('#yybDis').text('距离: ' + parseFloat(yybData.distance)/1000 + '千米');    $('#yybPhone').text('电话: ' + yybData.phone);}// 设置弹窗宽度var infoOpt = {    width: 260};function addWindow(e) {    // 点击弹窗    this.openInfoWindow(new BMap.InfoWindow('<div>名称: ' + this.customData.title + '</div>\n\t' +        '<div>地址: '+ this.customData.address +'</div>\n\t' +        '<div>距离: '+ parseFloat(this.customData.distance)/1000  + ' 千米</div>\n\t' +        '<div>电话: '+ this.customData.phone +'</div>'), infoOpt)}function makeInfoWindow(obj) {        // 初始化一个最近网点, 默认中, 弹窗        return new BMap.InfoWindow('<div>名称: ' + obj.customData.title + '</div>\n\t' +        '<div>地址: '+ obj.customData.address +'</div>\n\t' +        '<div>距离: '+ parseFloat(obj.customData.distance)/1000  + ' 千米</div>\n\t' +        '<div>电话: '+ obj.customData.phone +'</div>', infoOpt)}<script>