javascript - 如何将标记放置在图像顶部，并根据图像给出标记的位置？

Question

我正在尝试根据用户指定的位置在 map 顶部放置一个标记。

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

我想要相对于图像位置的标记坐标，而不是窗口。我是 HTML 和 JavaScript 的新手，所以非常感谢任何帮助。

提前致谢。

JSFiddle

HTML

<form name="parts">
    <input type="text" name="item" size="10"> 
</form>

<input type="button" onclick="get_location();" value="Search">

<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"  />

JavaScript

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";
    }
};

Answer 1

你快到了。只需将内容包装到某个“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>