Javascript 如何使用marker'；s相对于图像给出的位置？

我试图根据用户指定的位置在地图顶部放置一个标记

我让它使用绝对位置和相对于窗口的坐标工作，但是如果页面上的某些内容改变大小，它将移动图像，但不会移动标记坐标

我想要的是相对于图像位置的标记坐标，而不是窗口。我不熟悉HTML和JavaScript，因此非常感谢您的帮助

提前谢谢

HTML

---

你快到了。只需将内容包装到某个“position:relative”div中即可。标记图像将定位在此容器内，无论其移动到何处：

<div id="container" style="position: relative;">

  <img src="http://www.shankerhotel.com.np/images/google_map.png" id="marker" width="50px" height="50px" style="display: none; position: absolute" />

  <img src="http://www.outline-world-map.com/map-images-original/outline-world-map-blank-white-b3b.png" width="800" height="400" id="map"  />

</div>

将图像和标记放在一个公共容器元素中，并相对于该容器元素定位。您必须更新坐标以仅匹配图像，因此它不包括表单的高度等。您知道如何使其在屏幕上居中吗？如果我尝试使该

div

align=“center”

，标记将不再相对于地图水平移动，而是相对于边缘水平移动。看看这个更新的小提琴，它应该可以处理它。您需要指定DIV的宽度以适合图像。否则，它将延伸到父元素的宽度（在您的情况下为body）才能完美工作！再次感谢。

function get_location() {
    var location = document.forms['parts']['item'].value;

    if (location == "England")     
         coordinates = [310,80];
    else if( location == "Canada") 
         coordinates = [100,80];
    else 
         alert("Not found");

    document.getElementById('map').onload = put_marker(coordinates[0], coordinates[1]);

}

function put_marker(from_left, from_top) {
    with(document.getElementById('marker')) {
        style.left = from_left + "px";
        style.top = from_top + "px";
        style.display = "block";
    }
};

<div id="container" style="position: relative;">

  <img src="http://www.shankerhotel.com.np/images/google_map.png" id="marker" width="50px" height="50px" style="display: none; position: absolute" />

  <img src="http://www.outline-world-map.com/map-images-original/outline-world-map-blank-white-b3b.png" width="800" height="400" id="map"  />

</div>