在前端开发中，经常会需要使用地图来展示数据。而对于大多数人来说，实现这个功能可能有些困难。但是，在使用 jQuery 的帮助下，我们可以轻松地实现这个功能。
目标
我们的目标是在鼠标悬停在地图上时，显示鼠标所在位置的省市代码。
实现步骤
- 获取地图
首先，我们需要获取地图。你可以从百度、Google Maps 或其他地图 API 中获取地图。在本文中，我们将使用一个简单的 SVG 地图，可以通过以下链接下载: https://github.com/djaodjin/svg-map-usa/releases。你也可以使用自己的 SVG 地图文件，只需稍微修改一下代码即可。
- 加载 jQuery
接下来，我们需要加载最新版本的 jQuery 库。你可以从官方网站（https://jquery.com/）下载或使用 CDN。为了便于演示和测试，我们将使用 Google CDN 加载 jQuery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- 创建 HTML 元素
我们需要在 HTML 中创建一个容器，用于存放地图和展示省市代码。在此处，我们将容器命名为 #map-container。并且，我们还需要创建一个 div 元素，用于展示省市代码，并设置其初始状态为隐藏：
<div id="map-container"> <svg id="map" viewBox="0 0 800 500"></svg> <div id="tooltip"></div> </div>
- 加载地图
接下来，我们需要加载地图。在本例中，我们将使用 jQuery 的 .load() 方法来加载 SVG 文件：
$(function() { $('#map').load('usa.svg'); });
- 显示省市代码
当鼠标悬停在地图上时，我们需要显示鼠标所在位置的省市代码。我们将使用 jQuery 的 .hover() 方法来实现这个功能：
-- -------------------- ---- ------- ------- ------------------------ - --- ---------- - ------------------- --- ---------- - ---------------------- --- ------- - -------------- ----------------------- - - - - - ------------ --------------- -- ---------- - --------------------- ---展开代码
在这段代码中，我们首先获取鼠标所在位置的省市代码和名称。然后，我们创建一个 div 元素，用于显示省市代码和名称，并将其显示出来。最后，当鼠标移开时，我们将隐藏 div 元素。
示例代码
完整的 HTML 和 JavaScript 代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- --- ------------- ------ ---------------- -------------- - --------- --------- - -------- - --------- --------- ---- -- ----- -- ----------------- ----- -------- ---- -------- ----- - -------- ------- ------ ---- ------------------- ---- -------- ---------- - --- ----------- ---- ------------------- ------ ------- -------------------------------------------------------------------------------- -------- ------------ - -------------------------- ------- ------------------------ - --- ---------- - ------------------- --- ---------- - ---------------------- --- ------- - -------------- ----------------------- - - - - - ------------ --------------- -- ---------- - --------------------- --- --- --------- ------- -------展开代码
总结
通过上述步骤，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/4050
