百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

异步刷新地图

最后一小节我们将完成地图编写的最后一步刷新地图

每次点击checkbox我们需要刷新两个区域,一是宾馆选项,二是地图。

1)我们需要通过getFilter函数获取filter

2)通过map.removeTileLayer移除图层,再加入新图层,我们直接使用prodTileLayer函数

3)用filter拼凑出url,通过ajax获取旅馆信息(使用getHotelInfo函数)

4)用insertData刷新旅馆并为它绑定事件

function refreshPage(filter){
    var url = 'http://api.map.baidu.com/geosearch/v3/nearby?ak=ir7jFwBM0tPkLebXl3ScT9cB&geotable_id=135736&location=116.395884,39.932154&radius=100000'
    if(filter) {
        prodTileLayer(filter);
        url = url + '&filter=' + filter;
    }
    else{
         prodTileLayer('');
            }
    getHotelInfo(url,function(err,hotelInfo){
        if(err){
            console.log(err);
            insertData(err);
        }
        else {
            insertData(null,hotelInfo);
            addListen(hotelInfo);
        }
    });
}
在相应位置使用refreshPage函数,完成筛选功能
在提示处加refreshPage(filter);