# 交互式旅游地图 **Repository Path**: lutaining/interactive-travel-map ## Basic Information - **Project Name**: 交互式旅游地图 - **Description**: 交互式旅游地图/svg - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-04-18 - **Last Updated**: 2022-06-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # interactive-travel-map 【项目介绍】展示丽江旅程的网站，通过HTML5/CSS3实现响应式布局。使用svg和原生Javascript实现页面交互。链接：http://1.muliping.applinzi.com/map_2/ 效果图：

【文件结构】 Map_2 |__ index .html(主页) |__ map.html（地图） |__ route.html(路线) |__ note.html(记录) |__ css |__ font.css（latin字体） |__ main.css（主页样式） |__ map.css |__ route.css |__note.css |__ img |__map |__ route |__ 1.svg（东巴文小图） |__3.svg（东巴文大图） |__close.png（map中关闭背景图的图标） |__yunhe.png（网页logo） |__ js |__jquery-3.0.0.min.js |__ fastclick.js(提高手机端点击响应速度) |__ lunar.js（操作svg元素的class） |__index.js |__map.js |__route.js 【功能模块】

1.主页 --自适应手机屏幕的宽度 \ viewport：虚拟窗口； width=device-width ：虚拟窗口宽度=设备宽度； initial-scale=1：初始缩放比例为 1 倍，虚拟窗口相对设备窗口大小进行缩放。为什么使用viewport? ->不使用viewport时，手机会自动缩放页面。如980px的CSS元素，放入320px的设备中，则虚拟窗口相对设备窗口的缩放比例为980/320。 ->但这样页面整体缩小，并不好看。相当于我有一只大象，而盒子太小只能放老鼠，所以需要把大象缩小到老鼠大小放进去，这时我可能看不清大象的样子。 ->所以，我们可以针对不同的设备放置不同的元素，在大盒子里放大象，在小盒子里放老鼠。这时就需要使用viewport设置缩放比例为1，避免在小盒子里放老鼠时，仍然按980/320的比例缩放。以上只是个人的浅陋之见。 viewport的知识，推荐参考https://www.zybuluo.com/gongzhen/note/170557 -- IE识别H5标签引入html5shiv.js --导航栏svg图标预定义svg（由于是预定义的元素，所以将其css设置为不可见，禁用鼠标事件） |__defs(预定义可重用元素) |__symbol（定义可重用符号） |__id（后面使用时，需要用id引用符号） |__viewbox（符号大小，参数：x,y,w,h） |__path（路径）使用svg \ --响应式布局 @media screen and (max-width:768px) 判断屏幕宽度，当屏幕宽度<=768px时，将页面宽由80vw改为为100vw，同时改变logo和导航的大小。 2.Map --背景地图采用H5的响应式图片\