creating-an-interactive-map-of-the-us-b5o-CSDN博客

本文链接：https://blog.csdn.net/u011082575/article/details/133305763

原始地址：https://dev.to/codecustard/creating-an-interactive-map-of-the-us-b5o

在本教程中，我们将学习如何使用HTML、CSS和Javascript创建一个交互式的美国地图。
最终结果可以在这里查看：
https://codepen.io/codecustard/pen/NWpZxey
第一步是获取以SVG格式的地图。使用SVG可以将每个州定义为一个路径，进而可以使用CSS对其进行样式设置，并在Javascript中进行定位。你可以免费获取一张美国地图：
https://simplemaps.com/resources/svg-us
一旦你下载了SVG文件，创建一个新的index.html文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互式美国地图</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="details-box"></div>
</body>

需要注意的关键要点是具有"id"为"details-box"的div元素以及链接的"style.css"样式表。“details-box” div将用于在鼠标悬停在每个州上时创建悬停详情效果。

接下来要做的是在文本编辑器中打开svg文件，并将"…"内容复制到html文件的body标签中。

<body>
<svg>
...
</svg>
</body>

如果你查看svg的内容，你应该注意到有一些有用的属性，例如"id"设为每个州的缩写，以及"data-name"设为每个州的名称。

现在让我们创建一个名为"style.css"的新样式表文件，内容如下：

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
path {
stroke: white;
fill:paleturquoise !important;
transition: fill .4s ease;
}
path:hover {
fill: orange !important;
}
#us-map {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#details-box {
padding: 1rem;
border-radius: 8px;
font-size: 24px;
position: fixed;
color: white;
font-family: "Poppins";
background-color: black;
width: fit-content;
transform: translateX(-50%);
transition: opacity .4s ease;
z-index: 1;
}

现在让我们在body标签内添加以下Javascript代码：

<script>
var tooltipSpan = document.getElementById('details-box');
document.addEventListener('mouseover', function (e) {
if (e.target.tagName == 'path') {
var content = e.target.dataset.name;
document.getElementById("details-box").innerHTML = content;
document.getElementById("details-box").style.opacity = "100%";
}
else {
document.getElementById("details-box").style.opacity = "0%";
}
});
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x) + 'px';
};
</script>