Javascript 在css中的确切位置显示地图标记

所以我有一个包含x和y象限的数据库，我有一张350x350px的地图。我已将地图定位为：

background-image: url(/storage/maps/surface.png);
background-repeat: no-repeat;
height: 350px;
background-position: center center;
margin: 0px auto;
background-size: cover;

宽度似乎是429px，不知道为什么。我确信这和封面有关

在这张图片的顶部，我有一个标记：

font-size: 32px;
color: #f9e4b4;
z-index: 5;
position: absolute;
top: 78px;
left: 349px;

顶部的

表示Y位置，X位置表示左侧的

这些值（
top
和
left
）来自数据库，并在React JS中设置

目前，这将创建三个div：

<div class="location-map mb-3">
    <div style="background-image: url(&quot;/storage/maps/surface.png&quot;); background-repeat: no-repeat; height: 350px; background-position: center center; margin: 0px auto; background-size: cover;">
        <i class="fas fa-map-marker-alt player-icon" style="top: 78px; left: 349px;"></i>
    </div>
</div>



我遇到的问题是：


正如你所看到的，我正试图将这个标记定位在地图上一个像素完美的位置

现在，如您所见，位置状态为349、78，虽然这可能是正确的css，但标记应该位于地图的边缘（右侧），如果它确实位于左侧的349px

所以我的问题是，图像太小了吗？我是否正确定位了图像？为什么标记在它所在的位置而不是我想要的位置？
有两个主要问题需要解决：

map元素的大小应为精确的
350px
正方形
使用
顶部
和
左侧
应将销座放置在精确的坐标处
让我们从地图开始。如果您知道图像的确切图像尺寸，这就足够了：


.map{
背景：url(http://placehold.it/350x350);
高度：350px；
宽度：350px；
}
有两个主要问题需要解决：

map元素的大小应为精确的
350px
正方形
使用
顶部
和
左侧
应将销座放置在精确的坐标处
让我们从地图开始。如果您知道图像的确切图像尺寸，这就足够了：


.map{
背景：url(http://placehold.it/350x350);
高度：350px；
宽度：350px；
}