百度地图API实战 互动版

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

js加载数据

这一小节我们将使用js完成酒店列表内容

1、数据获取

我们要通过ajax获取LBS.云中的数据并将对应的旅馆数据加载到,右侧选项中,并且每次对条件修改的同时我们将异步刷新旅馆列表界面,这里我们仅需完成旅馆信息加载函数。我将会在后面小节中介绍LBS云的内容。

2、获取模板

我们使用下面代码,将hotel中的内容获取

var hotel = document.getElementById('hotel');
var hotel_html = hotel.innerHTML;

3、正则表达式的使用

我们匹配到hotel_html中的{{id}}、{{imgSRC}}等等,并将其替换为我们想要的数据。做法如下:

var html = '';
for(var i=0;i<hotelInfo.length;i++){
        html  +=  hotel_html.replace(/\{\{imgSrc\}\}/g,hotelInfo[i].img.big)
                            .replace(/\{\{name\}\}/g,hotelInfo[i].name)
                            .replace(/\{\{address\}\}/g,hotelInfo[i].address)
                            .replace(/\{\{price\}\}/g,'&yen;'+hotelInfo[i].price);
}

我将获取hotelInfo的函数放到了loadInfo.js文件夹中,我们将在将LBS那一章时讲解。

在提示位置加入代码,将获取到的html赋值给hotel.innerHTML
hotel.innerHTML = html;