响应式欧洲地图标记点定位失效问题求助

你遇到的核心问题是标记点使用了固定像素值的绝对定位，而地图是响应式缩放的。当浏览器窗口变化时，地图的宽高按比例缩放，但标记点的top/left是固定像素，不会跟着容器尺寸变化，自然就错位了。

我们需要把标记点的定位方式改成相对百分比定位，同时确保所有标记点都嵌套在地图的父容器内，让它们的位置基于父容器的尺寸动态计算。

关键改动点： #

• 给地图容器设置正确的相对定位，确保标记点的绝对定位是相对于地图容器而不是整个页面。
• 将所有标记点的top/left从固定px改成百分比值（需要根据原始像素和地图原始尺寸计算比例）。
• 添加transform: translate(-50%, -50%)让标记点的中心点对准目标位置（默认绝对定位是从元素左上角开始计算，这样调整后更精准）。
• 移除冗余的样式代码，整合CSS规则，用CSS伪类替代JS鼠标事件，更简洁易维护。

修改后的完整代码 #

<html>
<head>
    <title>Ewals Locations</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial;
            background-color: white;
        }
        .header {
            text-align: center;
            padding-bottom: 20px;
        }
        .header h1 {
            font-family: Bahnschrift;
            font-size: 35px;
            font-style: normal;
            font-weight: bold;
            margin-top: 10px;
        }
        .map-container {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
        }
        .map-img {
            display: block;
            max-width: 100%;
            height: auto;
        }
        .pin {
            position: absolute;
            width: 20px;
            height: 30px;
            transform: translate(-50%, -50%);
            transition: all 0.2s;
        }
        .pin:hover {
            content: url('pinggood2.png');
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="http://i-web.ewals.com/" target="_blank">
            <img src="Ewals_Cargo_Care.png" alt="Ewals Group Logo">
        </a>
        <h1>Ewals Locations</h1>
    </div>

    <div class="map-container">
        <img src="TEST4.png" alt="Europe Map" class="map-img">
        
        <!-- Austria -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Austria.html">
            <img src="pinggood.png" class="pin" style="top: 69.2%; left: 69.7%;" alt="Austria">
        </a>
        <!-- Czechia -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Czech%20Republic.html">
            <img src="pinggood.png" class="pin" style="top: 61.5%; left: 66.7%;" alt="Czechia">
        </a>
        <!-- Germany -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Germany.html">
            <img src="pinggood.png" class="pin" style="top: 60.8%; left: 64.4%;" alt="Germany">
        </a>
        <!-- The Netherlands -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Netherlands.html">
            <img src="pinggood.png" class="pin" style="top: 55.4%; left: 60.3%;" alt="Netherlands">
        </a>
        <!-- Romania -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Romania.html">
            <img src="pinggood.png" class="pin" style="top: 64.6%; left: 69.4%;" alt="Romania">
        </a>
        <!-- United Kingdom -->
        <a href="file:///C:/Users/Myname/Documents/Site2/United%20Kingdom.html">
            <img src="pinggood.png" class="pin" style="top: 53.8%; left: 54.7%;" alt="UK">
        </a>
        <!-- Belgium -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Belgium.html">
            <img src="pinggood.png" class="pin" style="top: 58.8%; left: 59.6%;" alt="Belgium">
        </a>
        <!-- Finland -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Finland.html">
            <img src="pinggood.png" class="pin" style="top: 24.2%; left: 70.1%;" alt="Finland">
        </a>
        <!-- Hungary -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Hungary.html">
            <img src="pinggood.png" class="pin" style="top: 62.3%; left: 66.2%;" alt="Hungary">
        </a>
        <!-- Poland -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Poland.html">
            <img src="pinggood.png" class="pin" style="top: 55.4%; left: 69.2%;" alt="Poland">
        </a>
        <!-- Slovakia -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Slovakia.html">
            <img src="pinggood.png" class="pin" style="top: 63.1%; left: 69.2%;" alt="Slovakia">
        </a>
        <!-- Bulgaria -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Bulgaria.html">
            <img src="pinggood.png" class="pin" style="top: 71.5%; left: 50.4%;" alt="Bulgaria">
        </a>
        <!-- France -->
        <a href="file:///C:/Users/Myname/Documents/Site2/France.html">
            <img src="pinggood.png" class="pin" style="top: 67.7%; left: 58.1%;" alt="France">
        </a>
        <!-- Italy -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Italy.html">
            <img src="pinggood.png" class="pin" style="top: 70.8%; left: 64.4%;" alt="Italy">
        </a>
        <!-- Portugal -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Portugal.html">
            <img src="pinggood.png" class="pin" style="top: 81.5%; left: 50.0%;" alt="Portugal">
        </a>
        <!-- Spain -->
        <a href="file:///C:/Users/Myname/Documents/Site2/Spain.html">
            <img src="pinggood.png" class="pin" style="top: 80.8%; left: 53.7%;" alt="Spain">
        </a>
    </div>
</body>
</html>

补充说明： #

1. 百分比计算方式：我假设你的原始地图尺寸是宽1470px、高690px（根据你原始的left最大1030px、top最大560px估算），如果你的地图实际尺寸不同，你可以用公式重新计算：百分比 = (原始像素值 / 地图原始尺寸) * 100%。
2. 容器居中：.map-container设置margin: 0 auto让地图在页面中居中，提升视觉体验。

内容的提问来源于stack exchange，提问作者Mickdeappelboom