容器中使用图片地图全覆盖
JSON文件加载，各个点位相对图片容器位置创建可点击点位，可点击点位扩大10px创建点击事件（直接用css标签 然后来实现），调用模态框，可以添加AJAX事件实现交互。
循环上面步骤 大地图嵌套模态框显示小地图，或者显示点击交互事件，小地图也可以在上面创建交互实现地图的联合交互创建。
地图的相对点位如何创建？
下面列子非常好显示 了其中内容，创建一个图片容器div，1920×1080 大小，不可缩放。
图片100%铺满，通过each 以及定义好的css 创建点击位置，和方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.map-box{
position:relative;
width:1920px;
height:1080px;
border:1px solid #999;
}
.factory-map{
width:1920px;
height:1080px;
display:block;
}
body{
overflow:auto;
}
/* 热区：宽高32px，四周多出10px点击范围 用于创建点击事件 巧妙*/
.point-hot{
position:absolute;
width:32px;
height:32px;
transform:translate(-50%,-50%);
cursor:pointer;
background:transparent;
}
.point-dot{
width:12px;
height:12px;
background:#f33;
border-radius:50%;
margin:10px;
}
.point-text{
position:absolute;
margin-top:-18px;
font-size:12px;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="map-box" id="mapBox">
<img class="factory-map" src="factory.jpg">
</div>
<script>
$(function(){
let pointList = [
{x:300,y:220,name:"一号车间"},
{x:650,y:480,name:"水泵房"}
];
const $mapBox = $("#mapBox");
$.each(pointList,function(i,item){
let $hot = $("<div class='point-hot'></div>")
.css({left:item.x,top:item.y})
.append("<div class='point-dot'></div><div class='point-text'>"+item.name+"</div>");
// 点击热区任意位置，弹出点位名称
$hot.click(function(e){
e.stopPropagation();
alert(item.name);
});
$mapBox.append($hot);
})
// 空白区域点击只打印坐标，不弹窗
$mapBox.click(function(e){
let r = $mapBox[0].getBoundingClientRect();
let x = e.clientX - r.left,y = e.clientY - r.top;
console.log("X:"+parseInt(x)+" Y:"+parseInt(y));
})
})
</script>
</body>
</html>