允许用户使用javascript / jquery编辑商城地图

Question

场景就像在我的网站上一样（jQuery在asp.net 3.5之上）我有一个购物中心的静态地图（例如 - ）
我希望允许用户添加/删除不同类型的标记（如“商店”，“洗手间”等），每个标记都有一个相关的名称。除了添加/删除这些兴趣点之外，不要求用户以任何方式编辑地图 之后，用户可以搜索特定的名称或类型，并且应该在地图上突出显示。

here提到了一些像micello和navteq这样的产品，这对我来说似乎有些过分。
我认为 this是正确的方向，但我需要对此进行更详细的说明。
任何意见都会受到批评。

Answer 1

您需要做的是将处理程序附加到图像的click事件，该事件将显示标记名称的输入，然后在填写输入后将标记添加到单击的位置：这会给你一个想法（经过测试http://jsfiddle.net/Rqdv9/）

var storage = {}
    $(document).ready(function() {
    $("img#mallmap").click(function(e) {
storage.posx = e.pageX;
storage.posy = e.pageY;
var nameinput = $("<input />");
nameinput.attr('type','text').appendTo('body');
nameinput.bind('blur',function() {
if ($(this).val() != '')
{
var markertext = $(this).val();
    nameinput.remove();
var marker = $("<div></div>");
marker.attr("class","marker").text(markertext).css('color','white').hide().appendTo('body');
marker.css({'position' : 'absolute','left' : storage.posx, 'top' : storage.posy}).show();
}
}).hide().css({'position' : 'absolute','left' : storage.posx, 'top' : storage.posy}).show();
})
        });

这是一个非常简单的，我认为你想收集的信息不仅仅是文字，所以你可以在点击上显示一个预先设计的动态表格，允许他们为标记等选择图像，然后简单为标记创建元素，并如图所示追加它。

Answer 2

这是我喜欢使用的地图 - Mobily Maps

虽然它不允许您正在寻找的功能，但我相信它可以很容易地扩展。

Answer 3

是否真的有必要为此使用插件？

单击光标时，将光标的位置保存在地图上似乎很容易。

这样的事情：

$('img').click(function(e) {
    //some div is appearing letting you specify information about the spot
    $.post('/url', {x: e.pageX, y: e.pageY, userData});
});

加载插件为你完成工作会不会更容易？