百度地图开发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>