0

ищу либу или подсказки в какую сторону копать, чтобы получить на выходе практически вот это https://github.com/timseverien/taggd, но вместо текста к точке надо будет привязать несколько фотографий, сделать мини галлерею, наподобие яндекс/гугл карт, когда в любой точке карты можно посмотреть панорамные фото местности

3
  • а что мешает код библиотеки глянуть?
    – ThisMan
    15 окт 2018 в 22:00
  • я новичок в js и плохо понимаю тамошний код, мне бы название технологий которые там надо использовать и я тогда смогу погуглить нормально и изучить это
    – 123jsnew
    15 окт 2018 в 22:23
  • у вас будет использоваться карта от гугл или яндекса? 16 окт 2018 в 6:29

1 ответ 1

0

Как-то так:

document.getElementById("bg").onclick = function(e){
  var imageUrl = prompt("Введите ссылку на изображение:");
  if ( imageUrl ){
    /* Создаем изображение */
    var img = document.createElement("img");
    img.src = imageUrl;
    img.style.position = "absolute";
    img.style.top = e.pageY + "px";
    img.style.left = e.pageX + "px";
    /* Создаем точку */
    var point = document.createElement("div");
    point.classList.add("point");
    point.style.top = e.pageY - 5 + "px";
    point.style.left = e.pageX - 5 + "px";
    /* Добавляем созданные объекты на карту*/
    document.getElementById("bg").appendChild(point);
    document.getElementById("bg").appendChild(img);
  }
}
#bg {
  background: url('https://www.vsyaotdelka.ru/upload/iblock/b7c/b7c0eaf40b5d4010ebc1f16ebe0a73ca.jpg');
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.point {
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  opacity: 0.5;
  border-radius: 0.5em; 
}
<div id="bg" style="">
</div>

<div id="hint"></div>

Так - изучайте CSS, JavaScript и смотрите в сторону библиотеки jQuery.

UPD: Обновил код с использованием изображения. Для закрытия изображения просто кликните по нему.

UPD 2: Обновил еще раз код. Для его работы нужно кликнуть по карте и в появившемся запросе указать путь к изображению, например http://server.com/..../image.jpg

10
  • мне нужно чтобы к точке привязывались фотографии и чтобы это мог делать пользователь сайта
    – 123jsnew
    16 окт 2018 в 20:13
  • @123jsnew, обновил код. Пользователь сайта может кликать по точкам.
    – Kosmos
    16 окт 2018 в 21:15
  • Ответ хороший, но вот совет по поводу jQuery удручает. Не надо смотреть в ее сторону, лучше ванилу вначале понять, а потом понять, что жквери в 2018 уже не нужен 16 окт 2018 в 21:22
  • @Kosmos я имел в виду, чтобы пользователь мог сам создавать на изображении эту точку и привязывать к ней фотографии. для примера structionsite.com к чертежу пользователь прикрепляет панорамное фото в любой точке
    – 123jsnew
    17 окт 2018 в 11:40
  • @123jsnew, это уже другая задача. В целом, лучше сразу точно описывать что именно вам нужно, чтобы не вводить других в заблуждение.
    – Kosmos
    17 окт 2018 в 14:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.