实现思路
json文件存储文字信息和图片路径
country：旅游国家
city：城市名称
date：旅游时间
imgs：旅游照片名称（含格式后缀）
remark：旅游经历介绍描述
longitude：城市或者景区的坐标经度
latitude：城市或者景区的坐标纬度
主要调用的leafletjs的api
marker的api介绍
L.marker([经纬度],可选项).addTo(map);
给这个marker添加一个弹出框
var marker = L.marker([30, 118]).addTo(map)
.bindPopup("<b>中国</b>
安徽黄山.") //字符串
.openPopup();
图片的展示
<div id="galley">
<ul class="pictures" onclick="viewPic()">
<li display=" "><img data-original=" " src=" " alt=" "></li>
</ul>
</div>
//动态拼接html字符串
function generatePicHtml(imgs) {
imgs = imgs || [];
// 动态拼接html字符串
var _html = '<div id="galley"><ul class="pictures" onclick="viewPic()">';
// 循环图片数组，动态拼接项目的相对地址url
for (var i = 0; i < imgs.length; i++) {
var url = './data/pictures/' + imgs[i];
var display = 'style="display:inline-block"';
// 这里
if (i > 5) {
display = 'style="display:none"';
}
_html += '<li ' + display + '><img data-original="' + url + '" src="' + url + '" alt="图片预览"></li>';
}
_html += '</ul></div></div>';
return _html;
}
将动态的图片html插入到bindPopup里面
view.js的使用
<div id="galley">
<img src="chungking_1.jpg" data-imgurl="chungking_1.jpg" alt="">
<img src="chungking_2.jpg" data-imgurl="chungking_2.jpg" alt="">
<img src="chungking_3.jpg" data-imgurl="chungking_3.jpg" alt="">
<img src="chungking_4.jpg" data-imgurl="chungking_4.jpg" alt="">
</div>
var galley = document.getElementById('galley');
var viewer = new Viewer(galley, {
url: 'data-original',
});
