如何实现我自己的谷歌地图"drop a pin"功能的模拟？

Question

我有一个web应用程序(ASP.NET/C#(，作为SAAS出售。我想实现具有以下要求的"映射"功能：

用户上传图像(地图((这是一次性操作，不需要缩放/滚动，用户必须缩放地图以适应屏幕(

以下步骤可以重复多次：

1. 用户在地图上选择一个位置(通过单击(
2. 位置已保存到数据库

最后，用户可以在任何给定时间查看所有先前选择的位置(引脚((报告(

以上所有操作都可以使用谷歌地图轻松完成，但Premier许可证超出了我的价格范围。

我找到了一种简单的方法来捕捉鼠标点击图像的坐标。NET的ImageButton控件。

最难的部分是在图像(报告(上标记位置。

我对如何在给定X，Y坐标的图像上标记位置的建议很感兴趣。

如有其他办法，我们将不胜感激。

Answer 1

在图像按钮上生成相对定位的容器<asp:Panel style="position:relative" runat="server" ID="imagePanel">...</asp:Panel>，在每个加载中添加几个绝对定位的图像控件-类似

foreach(var point in points)
{
    var image = new System.Web.UI.WebControls.Image { ImageUrl = "/pin.jpg" };
    image.Style.Value = string.format("position:absolute;top:{0}px;left:{1}px;display:block;width:30px; height:30px;", point.X, point.Y);
    imagePanel.Controls.Add(image);
}

实际上，我不确定这是使用ImageButton捕捉坐标的最佳方式——我最好为地图制作onclick处理程序来获取点击坐标，并使用ajax请求(例如，在这两种情况下都使用jquery(将其保存在服务器上，并使用从数据库传递的数据生成pin。