基于 Leaflet 的旅游地图相册实现

实现思路

image.png

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("中国
安徽黄山.") //字符串
.openPopup();

图片的展示

• 

//动态拼接html字符串
function generatePicHtml(imgs) {
imgs = imgs || [];
// 动态拼接html字符串
var _html = '

';
// 循环图片数组，动态拼接项目的相对地址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 += '
• 
';
}
_html += '

';
return _html;
}
将动态的图片html插入到bindPopup里面

view.js的使用

var galley = document.getElementById('galley');
var viewer = new Viewer(galley, {
url: 'data-original',
});