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 += '

html旅游地图制作,基于 Leaflet 的旅游地图相册实现相关推荐

30多个最受用的基于XML的Flash相册教程 -- Part II
Papervision 3D Flash相册教程 Flash相册教程 XML幻灯片V3教程制作带有过渡效果的基于XML的动态Flash幻灯片制作基于免费XML模板的flash幻灯片在Flash ...
30多个最受用的基于XML的Flash相册教程 -- Part I
我们一直热衷于收录出色的作品来做成专题,今天就要向大家介绍一些非常受用的基于XML的Flash相册教程(XML是一种网络脚本,大多数flash开发者都用它来存取数据). 下面列出的教程不仅能帮助您 ...
Java敌人跟地图的碰撞_（译）加入敌人和战斗：如果使用cocos2d制作基于tiled地图的游戏：第三部分...
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
html5微课程制作,翟猛老师《微课开发及制作-基于H5课件制作模式》
微课开发及制作-基于H5课件制作模式 --明确微课内涵掌握制作方法完成课程呈现-- [课程介绍] 随着VUCA时代的到来,人们的学习方式也迅速迎来了全新的打开方式.翻转课堂.混合式教学.自主式学习 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
如何用废品DVD驱动器制作基于GRBL + CNC V3 Shield的绘图仪
相关软件:https://download.csdn.net/download/acktomas/12182951 功能介绍: GRBL + CNCV3+基于Arduino的CNC机器本指南包括所需 ...
Android Studio 连接阿里云数据库【制作基于数据库的多人远程聊天APP】
Android Studio 连接阿里云数据库的简单方法[制作基于数据库的多人远程聊天APP] 首先购买好一个阿里云数据库RDS[我买了一年用了49元] 1.进入官网–>打开右上角的控制台 2. ...
HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
关于制作基于STM32的指纹打卡器（不完全体）
关于制作基于STM32的指纹打卡器(不完全体) 笔者认为首先需要构思好此打卡器需要实现的功能有哪些?作为一个指纹打卡器首先应该具备指纹识别功能.其次需要将我们识别到的用户反馈到显示器上给予打卡者打卡成 ...

html旅游地图制作,基于 Leaflet 的旅游地图相册实现

html旅游地图制作,基于 Leaflet 的旅游地图相册实现相关推荐

最新文章

热门文章