我可以 "stick" 将 html 对象指向图标或地图的移动部分吗？

Question

问题似乎有点含糊。我有一个 mapquest 地图，我用传单图标标记它。这些图标以编程方式添加，即：

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。我希望能够附加那个对象。

leaflet 的开发者论坛有一些简单的选项，可以将 image/video 和类似的简单项目添加到地图，但对于非标准 html 项目，我很好奇是否有 css 导向解。我检查了页面，图标本身没有 'id'，我正在考虑使用它来获取项目并假设继承其样式。

有什么想法吗？

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";

我可以 "stick" 将 html 对象指向图标或地图的移动部分吗？

Can I "stick" an html object to an icon or moving part of a map?

html

javascript

css

mapquest

leaflet