Question

我有一张手绘地图，必须根据所选项目在这些地图上标记点。为了实现这一点，我认为最好的办法是确保维护图像的大小，并根据点的坐标决定并存储在数据库中。现在，当选择特定项目时，我可以从数据库中获取相应的坐标，并且可以在图像将在背景中的页面上标记它，因此它将显示为图像上的标记。你能告诉我如何在给定坐标的图像上创建这些标记。请让我知道或指出一些更好的方法来实现这一点。

Answer 1

这是一个示范概念。获得所需点的坐标后，可以创建标记点并使用CSS定位。当然，还有很多工作要做，比如验证，坐标集的可能映射等等。

<强> http://jsfiddle.net/tonicboy/L87E5/

JS：

$('#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('');
});

Answer 2

Check this fiddle

<强> HTML

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

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

在上面的坐标值中，点由＆＃34;分隔。，＆＃34; 。 X＆amp;每个点的Y由＆＃34;分隔。 | ＆＃34; 分别

<强>的Javascript

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));

需要在我拥有的自定义地图上标记点作为图像

2 个答案:

Check this fiddle