ищу либу или подсказки в какую сторону копать, чтобы получить на выходе практически вот это https://github.com/timseverien/taggd, но вместо текста к точке надо будет привязать несколько фотографий, сделать мини галлерею, наподобие яндекс/гугл карт, когда в любой точке карты можно посмотреть панорамные фото местности
-
а что мешает код библиотеки глянуть?– ThisMan15 окт 2018 в 22:00
-
я новичок в js и плохо понимаю тамошний код, мне бы название технологий которые там надо использовать и я тогда смогу погуглить нормально и изучить это– 123jsnew15 окт 2018 в 22:23
-
у вас будет использоваться карта от гугл или яндекса?– Евгений Николаев16 окт 2018 в 6:29
1 ответ
Как-то так:
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
-
мне нужно чтобы к точке привязывались фотографии и чтобы это мог делать пользователь сайта– 123jsnew16 окт 2018 в 20:13
-
-
Ответ хороший, но вот совет по поводу jQuery удручает. Не надо смотреть в ее сторону, лучше ванилу вначале понять, а потом понять, что жквери в 2018 уже не нужен 16 окт 2018 в 21:22
-
@Kosmos я имел в виду, чтобы пользователь мог сам создавать на изображении эту точку и привязывать к ней фотографии. для примера structionsite.com к чертежу пользователь прикрепляет панорамное фото в любой точке– 123jsnew17 окт 2018 в 11:40
-
@123jsnew, это уже другая задача. В целом, лучше сразу точно описывать что именно вам нужно, чтобы не вводить других в заблуждение.– Kosmos17 окт 2018 в 14:09