html旅游地图制作,基于 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 += '

';