带有 Folium 的 Python:如何在弹出窗口中嵌入网页?

更新时间：2023-12-06 15:36:10

Here a quick example of how I proceed :

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

I took the script from this link, and you can check running the code snippet

        <!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 - react 排序功能下一篇 : 如何在运行时或OnAfterInstall上启动Windows服务

带有 Folium 的 Python:如何在弹出窗口中嵌入网页?

相关阅读

推荐文章