gpt4 book ai didi

javascript - 带有 Folium 的 Python : How can I embed a webpage in the popup?

转载 作者:太空宇宙 更新时间:2023-11-04 14:01:42 26 4
gpt4 key购买 nike

我正在研究 Python Folium 的简单实现使用基于 this page 的简单标记.

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,但我想嵌入一个网页。这是我的模型。

enter image description here

这可能吗?

最佳答案

这里是我如何进行的一个简单示例:

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 拿了脚本,你可以检查运行代码片段

        <!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>

关于javascript - 带有 Folium 的 Python : How can I embed a webpage in the popup?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29535715/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com