Как реализовать свой собственный аналог функции Google Maps «бросить булавку»?

Question

У меня есть веб-приложение (ASP.NET/C#), которое я продаю как SAAS.Я хочу реализовать функцию «сопоставления» со следующими требованиями:

Пользователь загружает изображение (карту) (это однократное действие, масштабирование / прокрутка не требуются, пользователь должен будет масштабировать картупо размеру экрана)

Следующие шаги можно повторять несколько раз:

1. Пользователь выбирает местоположение на карте (нажав на него)
2. Местоположениесохранено в базе данных

Наконец, пользователь может просматривать все ранее выбранные местоположения (булавки) в любой момент времени (отчет)

Все вышеперечисленное легко сделать с помощью Google Maps, ноЛицензия Premier находится вне моего ценового диапазона.

Я нашел простой способ фиксировать координаты щелчка мышью на изображении с помощью элемента управления ASP.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 в обоих случаях), чтобы сохранить его на сервере, и для генерации контактов, используя данные, переданные из вашей базы данных.