html jquery地图点位点击变色

例子：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>复制

标签

html jquery地图点位点击变色

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

【Java】SpringMVC参数接收（二）：JSON、URI、文件

vscode json文件添加注释报错

头歌-JavaScript基础

快速学会创建uni-app项目并了解pages.json文件

解密JWT（JSON Web Token）：深入剖析与全面解读

npm install / webdriver-manager update报错 unable to get local issuer certificate

解决执行npm(或pnpm)时报：证书过期 certificate has expired问题

【前端系列】如何优化 npm 镜像源加快包下载速度

npm常用命令详解

npm i卡在 idealTree buildDeps没反应的解决方案

前端哥

Python 控制机器狗实现基本动作（前进，后退，向左，向右）

【Java】SpringMVC参数接收（二）：JSON、URI、文件

微信开发者工具报错： app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2303220； lib: 2.30.4)

关于JSONObject和String类型的相互转换

java解析超大json文件数据

vscode json文件添加注释报错

头歌-JavaScript基础

VScode,右上方三角形的运行和调试消失不见【1.C/C 插件中Intelli Sense Engine与setting.json中的同步问题 2.,右上方三角形的运行和调试被隐藏的问题】

notepad 安装json格式化插件(Jsonviewer)的两种方式

C#Json序列化及反序列化

1
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

2
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

3
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

4
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

5
移动端css布局大全

2024-02-06 15:02:421000

6
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

7
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

8
vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

9
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

10
jQuery事件处理

2024-03-12 01:03:32999

	<!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>

html jquery地图点位点击变色

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

微信扫一扫：分享