Javascript 需要在自定义地图上标记点，我将其作为图像

我有一张手绘地图，必须根据所选项目在地图上标记点。为了实现这一点，我认为最好的办法是确保图像的大小得到保持，并根据这些点的坐标确定并存储在数据库中。现在，当一个特定的项目被选中时，我可以从数据库中获得相应的坐标，并可以在页面上标记它，图像将位于背景中，因此它将显示为图像上的标记。你能告诉我如何在给定坐标的图像上创建这些标记吗。

---

请务必让我知道或给我指出一些更好的实现方法。

这里是一个演示概念。一旦你有了你想要的点的坐标，你可以创建一个标记点并用CSS定位它。当然，还有很多工作要做，比如验证，坐标集的可能映射，等等

JS:

---

这是一个演示概念。一旦你有了你想要的点的坐标，你可以创建一个标记点并用CSS定位它。当然，还有很多工作要做，比如验证，坐标集的可能映射，等等

JS:

HTML

在上述坐标中，点的值用、、分隔。每个点的X和Y分别用|分隔

Javascript

HTML

在上述坐标中，点的值用、、分隔。每个点的X和Y分别用|分隔

Javascript

---

你能分享你尝试过的或给出更多细节吗？你能分享你尝试过的或给出更多细节吗？太好了。类似的东西正是我想要的。谢谢，太好了。类似的东西正是我想要的。谢谢，谢谢。这是我想要的开始，但我想要一个更具活力的，如@T-nguyen所示。谢谢。这就是我想要的开始，但是想要一个更具活力的，像@T-nguyen所展示的那样。

$('#plot_form').submit(function(ev) {
    ev.preventDefault();
    var map = $('#map_wrapper'),
        point = $('<div class="map-point"></div>'),
        x = $('#lon').val(),
        y = $('#lat').val();

    point.css({
        left: x + "px",
        top: y + "px"
    });
    point.appendTo(map);
});

$('#reset').click(function() {
    $('.map-point').remove();
    $('#lat').val('');
    $('#lon').val('');
});

<!-- Add database stored coordinates as value in textarea like below -->

<textarea id="coordinateVals">230|100,30|100,130|30,100|260</textarea>

var s=document.getElementById('coordinateVals').value;
var g=s.split(',');

var frag = document.createDocumentFragment(),
    element = 'div',
    clsName = 'sections';

for (var i=0; i<g.length; i++) {
    var box = document.createElement(element);
    box.className = clsName
    var coordinates = g[i].split("|");
    box.setAttribute('style','top:'+coordinates[0]+'px;left:'+coordinates[1]+'px;');
    // Append the child into the Fragment
    frag.appendChild(box);
}

// Finally, append the fragment into the real DOM
document.getElementsByTagName('body')[0].appendChild(frag.cloneNode(true));