html + jquery地图点位点击变色

最新推荐文章于 2024-04-18 14:30:56 发布

长箭已搭弓

最新推荐文章于 2024-04-18 14:30:56 发布

阅读量1k

点赞数 25

文章标签： html jquery 前端

本文链接：https://blog.youkuaiyun.com/include_computer/article/details/134941508

版权

本文介绍了如何使用HTML和jQuery在一张中国地图图片上，通过点击各个省的中心城市定位的div元素，实现点击后切换对应省份的地图并高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子：html jquery 不使用echarts，拿一张中国地图的图片，在各个省的中心城市定位一个div，点击这个div切换当前城市的省份标红的中国地图的图片

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 样式可以根据实际情况进行调整 */
        .map-container {
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid red;
            background: url(./image/mrMap.png) 0 0 / 100% 100%;
        }

        .map-image {
            width: 100%;
            height: auto;
        }

        .city-marker {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: blue;
            border-radius: 50%;
            cursor: pointer;
        }

        .message {
            position: absolute;
            top: 0;
            left: 0;
            width: 255px;
            height: 203px;
            background-color: yellow;
            text-align: center;
            line-height: 50px;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.city-marker').on('click', function (event) {
                var province = $(this).data('province');
                // 切换当前城市标记的图片
                switchMapHighlight(province);
                var top = event.clientY + 'px'; // 计算message div的垂直位置  
                var left = event.clientX + 'px'; // 计算message div的水平位置  
                $('.message').css({
                    top: top,
                    left: left
                }).show(); // 设置message div的位置并显示  
            });
        });

        function switchMapHighlight(province) {
            // 隐藏所有标记的图片
            $('.map-image').hide();
            // 显示当前城市对应的标记的图片
            $('#' + province + '-map').show();
        }
    </script>
</head>

<body>
    <div class="map-container">
        <!-- 地图的图片 -->
        <img id="huangdian-map" class="map-image" src="./image/黄店.png" style="display: none;" />
        <img id="yongchang-map" class="map-image" src="./image/永昌.png" style="display: none;" />
        <!-- 其他省份地图的图片 -->
        <!-- 例如：<img id="huangdian-map" class="map-image" src="huangdian-map.jpg" style="display: none;" /> -->
        <!-- 各个省的中心城市 -->
        <div class="city-marker" data-province="yongchang" style="top: 100px; left: 200px;"></div>
        <div class="city-marker" data-province="huangdian" style="top: 200px; left: 110px;"></div>
        <!-- 其他省份的中心城市 -->
        <!-- 例如：<div class="city-marker" data-province="yongchang" style="top: 150px; left: 300px;"></div> -->

        <div class="message">
            message
        </div>
    </div>
</body>

</html>