我正在使用基于this page 的简单标记实现Python Folium 的简单实现。
import folium
map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12,
tiles='Stamen Terrain')
map_1.simple_marker([45.3288, -121.6625], popup='Mt. Hood Meadows')
map_1.simple_marker([45.3311, -121.7113], popup='Timberline Lodge')
map_1.create_map(path='mthood.html')
我可以在弹出窗口中包含 HTML，但我想嵌入一个网页。这是我的模型。
有可能吗？
【问题讨论】：
标签： javascript python html leaflet folium
这里是我如何进行的快速示例：
def get_frame(url,width,height):
html = """
<!doctype html>
<html>
<iframe id="myIFrame" width="{}" height="{}" src={}""".format(width,height,url) + """ frameborder="0"></iframe>
<script type="text/javascript">
var resizeIFrame = function(event) {
var loc = document.location;
if (event.origin != loc.protocol + '//' + loc.host) return;
var myIFrame = document.getElementById('myIFrame');
if (myIFrame) {
myIFrame.style.height = event.data.h + "px";
myIFrame.style.width = event.data.w + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", resizeIFrame, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", resizeIFrame);
}
</script>
</html>"""
popup = get_frame(url,
width,
height)
marker = folium.CircleMarker([lat,lon],
radius=radius,
color='#3186cc',
fill_color = '#3186cc',
popup=popup)
marker.add_to(map)
iframe = folium.element.IFrame(html=html,width=width,height=height)
popup = folium.Popup(iframe,max_width=width)
return popup
我从this link拿到脚本，你可以查看运行代码sn-p
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://rawgithub.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://raw.githubusercontent.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" />
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
<style> #map_b2063da716d14361b72b0f9a50315884 {
position : relative;
width : 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_b2063da716d14361b72b0f9a50315884" ></div>
</body>
<script>
var southWest = L.latLng(-90, -180);
var northEast = L.latLng(90, 180);
var bounds = L.latLngBounds(southWest, northEast);
var map_b2063da716d14361b72b0f9a50315884 = L.map('map_b2063da716d14361b72b0f9a50315884', {
center:[37.38583,-5.99306],
zoom: 12,
maxBounds: bounds,
layers: [],
crs: L.CRS.EPSG3857
});
var tile_layer_b2761496c65d46bf86a90b028be4d5f1 = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 1,
attribution: 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
detectRetina: false
}
).addTo(map_b2063da716d14361b72b0f9a50315884);
var circle_marker_16be3d0af1084adbbb743bb146162d55 = L.circle(
[37.38376,-5.9914],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_0146596d5713425b90dd89b1beb77099 = L.popup({maxWidth: '800'});
var i_frame_8bf40a55fcf94c2aae94317c7c942f95 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvU2V2aWxsZV9DYXRoZWRyYWwgZnJhbWVib3JkZXI9IjAiPjwvaWZyYW1lPgogICAgICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgICB2YXIgcmVzaXplSUZyYW1lID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgICAgICAgdmFyIGxvYyA9IGRvY3VtZW50LmxvY2F0aW9uOwogICAgICAgICAgICBpZiAoZXZlbnQub3JpZ2luICE9IGxvYy5wcm90b2NvbCArICcvLycgKyBsb2MuaG9zdCkgcmV0dXJuOwogICAgICAgICAgICAKICAgICAgICAgICAgdmFyIG15SUZyYW1lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ215SUZyYW1lJyk7CiAgICAgICAgICAgIGlmIChteUlGcmFtZSkgewogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUuaGVpZ2h0ID0gZXZlbnQuZGF0YS5oICsgInB4IjsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLndpZHRoICA9IGV2ZW50LmRhdGEudyArICJweCI7CiAgICAgICAgICAgIH0KICAgICAgICB9OwogICAgICAgIGlmICh3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcikgewogICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigibWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSwgZmFsc2UpOwogICAgICAgIH0gZWxzZSBpZiAod2luZG93LmF0dGFjaEV2ZW50KSB7CiAgICAgICAgICAgIHdpbmRvdy5hdHRhY2hFdmVudCgib25tZXNzYWdlIiwgcmVzaXplSUZyYW1lKTsKICAgICAgICB9CiAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgPC9odG1sPgogICAgICAgIAogICAgICAgIA==" width="800" height="500"></iframe>')[0];
popup_0146596d5713425b90dd89b1beb77099.setContent(i_frame_8bf40a55fcf94c2aae94317c7c942f95);
circle_marker_16be3d0af1084adbbb743bb146162d55.bindPopup(popup_0146596d5713425b90dd89b1beb77099);
var circle_marker_0211ff4767b34184ad4c663e0b1d729c = L.circle(
[37.383889,-5.991389],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_b92b5fd312c94c00984279d5b1b86f69 = L.popup({maxWidth: '800'});
var i_frame_2d42c75caa4245a59d6f07b1c9212cc8 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQWxjwod6YXJfb2ZfU2V2aWxsZSBmcmFtZWJvcmRlcj0iMCI+PC9pZnJhbWU+CiAgICAgICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogICAgICAgIHZhciByZXNpemVJRnJhbWUgPSBmdW5jdGlvbihldmVudCkgewogICAgICAgICAgICB2YXIgbG9jID0gZG9jdW1lbnQubG9jYXRpb247CiAgICAgICAgICAgIGlmIChldmVudC5vcmlnaW4gIT0gbG9jLnByb3RvY29sICsgJy8vJyArIGxvYy5ob3N0KSByZXR1cm47CiAgICAgICAgICAgIAogICAgICAgICAgICB2YXIgbXlJRnJhbWUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbXlJRnJhbWUnKTsKICAgICAgICAgICAgaWYgKG15SUZyYW1lKSB7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS5oZWlnaHQgPSBldmVudC5kYXRhLmggKyAicHgiOwogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUud2lkdGggID0gZXZlbnQuZGF0YS53ICsgInB4IjsKICAgICAgICAgICAgfQogICAgICAgIH07CiAgICAgICAgaWYgKHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKSB7CiAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJtZXNzYWdlIiwgcmVzaXplSUZyYW1lLCBmYWxzZSk7CiAgICAgICAgfSBlbHNlIGlmICh3aW5kb3cuYXR0YWNoRXZlbnQpIHsKICAgICAgICAgICAgd2luZG93LmF0dGFjaEV2ZW50KCJvbm1lc3NhZ2UiLCByZXNpemVJRnJhbWUpOwogICAgICAgIH0KICAgICAgICA8L3NjcmlwdD4KICAgICAgICA8L2h0bWw+CiAgICAgICAgCiAgICAgICAg" width="800" height="500"></iframe>')[0];
popup_b92b5fd312c94c00984279d5b1b86f69.setContent(i_frame_2d42c75caa4245a59d6f07b1c9212cc8);
circle_marker_0211ff4767b34184ad4c663e0b1d729c.bindPopup(popup_b92b5fd312c94c00984279d5b1b86f69);
var circle_marker_4cc91c97e25a4456b822e55f4ecb1549 = L.circle(
[37.384,-5.992],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_0b953df7a418459c8e72e0f5c1b0bb87 = L.popup({maxWidth: '800'});
var i_frame_d059900a061a4549b59097ff5ee8b4d0 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvR2VuZXJhbF9BcmNoaXZlX29mX3RoZV9JbmRpZXMgZnJhbWVib3JkZXI9IjAiPjwvaWZyYW1lPgogICAgICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgICB2YXIgcmVzaXplSUZyYW1lID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgICAgICAgdmFyIGxvYyA9IGRvY3VtZW50LmxvY2F0aW9uOwogICAgICAgICAgICBpZiAoZXZlbnQub3JpZ2luICE9IGxvYy5wcm90b2NvbCArICcvLycgKyBsb2MuaG9zdCkgcmV0dXJuOwogICAgICAgICAgICAKICAgICAgICAgICAgdmFyIG15SUZyYW1lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ215SUZyYW1lJyk7CiAgICAgICAgICAgIGlmIChteUlGcmFtZSkgewogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUuaGVpZ2h0ID0gZXZlbnQuZGF0YS5oICsgInB4IjsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLndpZHRoICA9IGV2ZW50LmRhdGEudyArICJweCI7CiAgICAgICAgICAgIH0KICAgICAgICB9OwogICAgICAgIGlmICh3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcikgewogICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigibWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSwgZmFsc2UpOwogICAgICAgIH0gZWxzZSBpZiAod2luZG93LmF0dGFjaEV2ZW50KSB7CiAgICAgICAgICAgIHdpbmRvdy5hdHRhY2hFdmVudCgib25tZXNzYWdlIiwgcmVzaXplSUZyYW1lKTsKICAgICAgICB9CiAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgPC9odG1sPgogICAgICAgIAogICAgICAgIA==" width="800" height="500"></iframe>')[0];
popup_0b953df7a418459c8e72e0f5c1b0bb87.setContent(i_frame_d059900a061a4549b59097ff5ee8b4d0);
circle_marker_4cc91c97e25a4456b822e55f4ecb1549.bindPopup(popup_0b953df7a418459c8e72e0f5c1b0bb87);
var circle_marker_f36b000114d34c4480c0e3874b3a1aff = L.circle(
[37.3925,-5.999722],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_8b33998389c647748a4b7f558db9086f = L.popup({maxWidth: '800'});
var i_frame_37f9728e7129448d8421dadcc3a5a7e7 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvTXVzZXVtX29mX0ZpbmVfQXJ0c19vZl9TZXZpbGxlIGZyYW1lYm9yZGVyPSIwIj48L2lmcmFtZT4KICAgICAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgdmFyIHJlc2l6ZUlGcmFtZSA9IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgICAgICAgIHZhciBsb2MgPSBkb2N1bWVudC5sb2NhdGlvbjsKICAgICAgICAgICAgaWYgKGV2ZW50Lm9yaWdpbiAhPSBsb2MucHJvdG9jb2wgKyAnLy8nICsgbG9jLmhvc3QpIHJldHVybjsKICAgICAgICAgICAgCiAgICAgICAgICAgIHZhciBteUlGcmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdteUlGcmFtZScpOwogICAgICAgICAgICBpZiAobXlJRnJhbWUpIHsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLmhlaWdodCA9IGV2ZW50LmRhdGEuaCArICJweCI7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS53aWR0aCAgPSBldmVudC5kYXRhLncgKyAicHgiOwogICAgICAgICAgICB9CiAgICAgICAgfTsKICAgICAgICBpZiAod2luZG93LmFkZEV2ZW50TGlzdGVuZXIpIHsKICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZXNpemVJRnJhbWUsIGZhbHNlKTsKICAgICAgICB9IGVsc2UgaWYgKHdpbmRvdy5hdHRhY2hFdmVudCkgewogICAgICAgICAgICB3aW5kb3cuYXR0YWNoRXZlbnQoIm9ubWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSk7CiAgICAgICAgfQogICAgICAgIDwvc2NyaXB0PgogICAgICAgIDwvaHRtbD4KICAgICAgICAKICAgICAgICA=" width="800" height="500"></iframe>')[0];
popup_8b33998389c647748a4b7f558db9086f.setContent(i_frame_37f9728e7129448d8421dadcc3a5a7e7);
circle_marker_f36b000114d34c4480c0e3874b3a1aff.bindPopup(popup_8b33998389c647748a4b7f558db9086f);
var circle_marker_c8f4a3824ab248d7b4516decbda1b587 = L.circle(
[37.3899,-5.98711],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_d59527a47f074edb946f6a17991ba6e3 = L.popup({maxWidth: '800'});
var i_frame_c087ed2281544bcd954d25c51e54fcb3 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQ2FzYV9kZV9QaWxhdG9zIGZyYW1lYm9yZGVyPSIwIj48L2lmcmFtZT4KICAgICAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgdmFyIHJlc2l6ZUlGcmFtZSA9IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgICAgICAgIHZhciBsb2MgPSBkb2N1bWVudC5sb2NhdGlvbjsKICAgICAgICAgICAgaWYgKGV2ZW50Lm9yaWdpbiAhPSBsb2MucHJvdG9jb2wgKyAnLy8nICsgbG9jLmhvc3QpIHJldHVybjsKICAgICAgICAgICAgCiAgICAgICAgICAgIHZhciBteUlGcmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdteUlGcmFtZScpOwogICAgICAgICAgICBpZiAobXlJRnJhbWUpIHsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLmhlaWdodCA9IGV2ZW50LmRhdGEuaCArICJweCI7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS53aWR0aCAgPSBldmVudC5kYXRhLncgKyAicHgiOwogICAgICAgICAgICB9CiAgICAgICAgfTsKICAgICAgICBpZiAod2luZG93LmFkZEV2ZW50TGlzdGVuZXIpIHsKICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZXNpemVJRnJhbWUsIGZhbHNlKTsKICAgICAgICB9IGVsc2UgaWYgKHdpbmRvdy5hdHRhY2hFdmVudCkgewogICAgICAgICAgICB3aW5kb3cuYXR0YWNoRXZlbnQoIm9ubWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSk7CiAgICAgICAgfQogICAgICAgIDwvc2NyaXB0PgogICAgICAgIDwvaHRtbD4KICAgICAgICAKICAgICAgICA=" width="800" height="500"></iframe>')[0];
popup_d59527a47f074edb946f6a17991ba6e3.setContent(i_frame_c087ed2281544bcd954d25c51e54fcb3);
circle_marker_c8f4a3824ab248d7b4516decbda1b587.bindPopup(popup_d59527a47f074edb946f6a17991ba6e3);
</script>
【讨论】：
我想在 popup="some text here" 中包含 html，我发现 folium 模块默认会转义所有 html 语法，以便在浏览器中显示实际语法而不是处理它，所以对于例子
'<' will becomes '&-l-t-;' without the dashes
我根本不懂java，所以我所做的是：在生成'map.html'文件后，我会运行另一个脚本将转义改回html语法，这很脏，代码是超级糟糕，但它为我想做的事情工作。
def writeHTML(inputfile, outputfile):
readfile_first = open(inputfile,'r')
writefile_first = open(outputfile, 'w')
for line in readfile_first:
writefile_first.write(line.replace('<','<'))
readfile_first.close()
writefile_first.close()
readfile_second = open(outputfile, 'r')
writefile_second = open(inputfile, 'w')
for line in readfile_second:
writefile_second.write(line.replace('"','"'))
readfile_second.close()
writefile_second.close()
readfile_third = open(inputfile, 'r')
writefile_third = open(outputfile, 'w')
for line in readfile_third:
writefile_third.write(line.replace('>','>'))
readfile_third.close()
writefile_third.close()
【讨论】：
看起来可以使用 iframe。我做了一个fiddle 来测试一下，但是 jsfiddle 阻止了我对 google.com 的传出请求并重定向回 jsfiddle 登录页面。但这是一个很好的概念证明，因为它在弹出窗口中加载了一个外部页面。
layer.bindPopup("<html><body><iframe src="http://www.google.com">
<p>Your browser does not support iframes.</p></iframe></body></html>");
我没试过，不过你也可以试试jquery的load函数。
【讨论】：