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

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

提到了一些产品，如胶束和navteq，它们对我来说似乎有点过分。
我认为这是一个正确的方向，但我需要更多的阐述。

---

任何意见都将被采纳

这是我喜欢使用的地图-

---

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

这真的需要使用插件吗

当你点击地图时，保存光标在地图上的位置似乎很容易

大概是这样的：

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

---

这不是比加载一个插件来为您完成这项工作更容易吗？

您需要做的是在图像的单击事件上附加一个处理程序，它将显示标记名称的输入，然后在输入填充后将标记添加到单击位置：这将给您一个想法（已测试）

var存储={}
$（文档）.ready（函数（）{
$（“img#mallmap”）。单击（函数（e）{
storage.posx=e.pageX；
storage.posy=e.pageY；
变量nameinput=$（“”）；
nameinput.attr（'type'，'text'）。appendTo（'body'）；
nameinput.bind（'blur'，function（）{
if（$（this.val（）！=“”）
{
var markertext=$（this.val（）；
nameinput.remove（）；
变量标记=$（“”）；
marker.attr（“class”，“marker”）.text（markertext）.css（'color'，'white'）.hide（）.appendTo（'body'）；
css（{'position'：'absolute'，'left'：storage.posx，'top'：storage.posy}）.show（）；
}
}).hide（）.css（{'position'：'absolute'，'left'：storage.posx，'top'：storage.posy}）.show（）；
})
});

---

这是一个非常简单的方法，我想你想收集更多的信息而不仅仅是文本，因此你可以在点击时显示一个预先设计的动态表单，允许他们为标记选择图像等，然后简单地为标记创建元素，然后如图所示将其追加。

如果需要重复使用，可以将位置保存在数据库中。您只需将posX和posY保存到db中，并在任何时候再次使用它们即可。你也可以保存额外的数据（img/information/datecreated等）。我最后使用了类似的东西，还有@dheerajkumar答案中的MobilyMap插件

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