Могу ли я «прикрепить» объект html к значку или движущейся части карты?

Question

Вопрос может показаться немного расплывчатым. У меня есть карта mapquest, и я отмечаю ее значком листовки. Эти значки добавляются программно ie:

var marker = L.marker([40.613953, -75.477791], {icon: cameraIcon}).addTo(Window.map);
marker.id = "MyMarker";
marker.addEventListener("click", loadSomething);

В функции loadSomething я надеялся, что смогу прикрепить iframe к этому значку. Прямо сейчас я просто захватываю x / y события щелчка и создаю объект на странице в этом месте.

Проблема в том, что делая это, когда карта перемещается (и, следовательно, мой значок движется) созданный мной объект, очевидно, зафиксирован на исходном x / y. Я надеялся, что смогу прикрепить этот объект.

На форумах разработчиков для листовок есть простые варианты добавления изображения / видео и таких простых элементов на карту, но для нестандартного элемента html I было любопытно, есть ли решение, ориентированное на css. Я проверил страницу, и у самого значка нет идентификатора, я подумывал использовать его, чтобы получить элемент и гипотетически унаследовать его стиль.

Есть идеи?

Answer 1

Решение довольно простое, пользовательский контент HTML может быть встроен во всплывающее окно маркера. Вот простой пример:

Window.map = L.map('map', {
    layers: mapLayer,
    center: [ 40.613953, -75.477791],
    zoom: 12
});


var cameraIcon = L.icon({
iconUrl: 'ipcam.png',
});



var marker = L.marker([40.613953, -75.477791], {icon: cameraIcon}).addTo(Window.map);
marker.bindPopup('<iframe src="test.html" width="300px" height="300px" style="border:none;"></iframe>').openPopup();
marker.importantInfo = "Testing Important Marker Info";
marker.id = "MyMarker";