1. 特殊地图 —— 使用SVG实现
特殊地图（像一些景点的导航图，包含了背景图、每个景点图标和景点名称），使用ps软件导出为svg代码，进行调整修改
在ps中创建一个空白文档，将特殊地图复制到该文档，因为每个景点名称有一个激活效果（字体变成白色，黄色的背景），因此需要每个景点名称都需要制作一个激活的背景图，字体颜色可以使用css进行更改。做好之后将景点导航图导出为svg，在浏览器打开，就可以右键点击查看网页源代码，将代码复制到编辑器中调整。
<svg class="map " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 826 817">
<image xlink:href="./images/map.png" x="0" y="0" width="826" height="817"></image>
<g class="item" data-index="0">
<rect class="cls-1" x="566" y="659" width="130" height="30" rx="15" ry="15"></rect>
<circle class="cls-2" cx="600.5" cy="673.5" r="9.5"></circle>
<text class="cls-5" x="597.504" y="677.79">1</text>
<text class="cls-6" x="618.069" y="679.459">祈运殿</text>
</g>
...
</svg>
svg简单知识点：
svg基于XML 标记语言，用于标记可缩放的矢量图形(属于对图像的形状描述)
svg文件可以直接内嵌到Html页面中，用 css 设置样式，js 进行操作
1. <svg></svg>标签 => 创建一个SVG文档片段
xmlns属性声明命名空间
viewBox属性定义画布上可以显示的区域。由空格或逗号分隔的4个值(min x, min y, width, height)，分别是左上角的横坐标和纵坐标、视口的宽度和高度
注：svg还有
width属性和height属性，如果不设置这两个属性，只设置viewBox属性，则相当于只给定 svg 的长宽比
2. <image></image>标签 => 定义图像
x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度" （必需）
height="图像的高度" （必需）
xlink:href="图像的路径" （必需）
将背景图单独作为png格式的图片导出，添加到svg标签中
3. <g></g>标签 => 用于把相关元素进行组合的容器元素
4. <rect></rect>标签 => 定义一个矩形
x="矩形的左上角的x轴坐标"
y="矩形的左上角的y轴坐标"
rx="x轴的半径"
ry="y轴的半径"
width="矩形的宽度"（必需）
height="矩形的高度"（必需）
5. <circle></circle>标签 => 定义一个圆
cx="圆的x轴坐标"
cy="圆的y轴坐标"
r="圆的半径"（必需）
6. <text></text>标签 => 定义一个文本
标签里面的相关属性的值，ps导出的svg都已经定义好了，基本不用动，但是需要调整一些样式
2. swiper切换景点图片和介绍
使用swiper 控制景点的图片和介绍切换，当swiper切换时，同时改变地图上对应景点的激活状态
new Swiper(".mySwiper", {
autoplay: {
delay: 3000,
},
loop: true,
on: {
slideChange: function () {
//realIndex 当前活动块的索引，在loop模式下不会将复制的块的数量计算在内。
let idx = this.realIndex
let mapArr = document.querySelectorAll('.map .item')
mapArr[idx].classList.add('on')
mapArr.forEach((item, index) => {
if (index != idx) {
item.classList.remove('on')
}
})
}
},
},
});
在slideChange事件函数（当前Slide切换到另一个Slide时执行）中，获取当前活动块的索引和地图上的所有景点元素，给地图上当前景点的名称添加激活效果
并循环地图上的所有景点，当该活动块的索引不等于循环的index，就移除景点名称的激活效果
3. 点击地图上的景点，切换swiper
循环地图上的所有景点，每个景点进行点击时，获取当前景点设置的data-index属性，当该属性和循环的索引值一致时，添加景点名称的激活效果，并让Swiper切换到指定slide，不相等就移除景点名称的激活效果
let mapArr = document.querySelectorAll('.map .item')
mapArr.forEach((item, index) => {
item.addEventListener('click', () => {
let idx = Number(item.getAttribute('data-index'))
if (idx == index) {
item.classList.add('on')
swiper.slideToLoop(idx, 1000, false);
} else {
item.classList.remove('on')
}
})
})
效果展示：
