如何在wxPython sizer中移动cefpython嵌入式浏览器

问题描述

我正在尝试添加一个按钮并将浏览器面板向右移动。我想要左边的按钮，但按钮在我显示的地图的顶部。这是代码 http://pastie.org/p/4y8FtkR1z2mbZO3WHuSt5L

    self.browser_panel = wx.Panel(self,style=wx.WANTS_CHARS)
    self.browser_panel.Bind(wx.EVT_SET_FOCUS,self.OnSetFocus)
    self.browser_panel.Bind(wx.EVT_SIZE,self.OnSize)

    self.sizer1 = wx.BoxSizer(wx.VERTICAL)
    self.sizer1.Add(self.browser_panel,1,wx.ALIGN_RIGHT)
    
    self.sizer2 = wx.BoxSizer(wx.HORIZONTAL)
    self.sizer1.Add(self.sizer2)
    self.sizer2.Add(wx.Button(self.browser_panel,wx.ID_ANY,'sheesh'),wx.ALIGN_CENTER)

SCREENSHOT

解决方法

这是一个示例，使用我在评论中提到的方法，即 Not 使按钮成为 browser_panel 的子项。
警告：我没有将 cef python 或 gmplot 加载到我的机器上，所以这是纯 wxPython。

import wx
import wx.html2

class MyBrowser(wx.Frame):
    def __init__(self,*args,**kwds):
        wx.Frame.__init__(self,**kwds)
        self.SetTitle("Zoom Christchurch NZ")

        filemenu = wx.Menu()
        filemenu.Append(1,"Some option")
        filemenu.Append(2,"Another option")
        filemenu.Append(3,"&Quit")
        menubar = wx.MenuBar()
        menubar.Append(filemenu,"&File")
        self.SetMenuBar(menubar)
        
        sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.browser = wx.html2.WebView.New(self)
        Url = wx.FileSystem.FileNameToURL('maparea.html')
        self.browser.LoadURL(Url)
        self.sheesh = wx.Button(self,wx.ID_ANY,'sheesh')

        sizer.Add(self.sheesh,wx.ALIGN_TOP)
        sizer.Add(self.browser,1,wx.EXPAND,10)

        wx.EvtHandler.Bind(self,wx.html2.EVT_WEBVIEW_ERROR,self.BrowserError)
        filemenu.Bind(wx.EVT_MENU,self.OnQuit,id=3)  # Window closed using the Menu Quit option
        self.sheesh.Bind(wx.EVT_BUTTON,self.OnButton)
        self.Bind(wx.EVT_CLOSE,self.OnQuit)  # Window closed using the Title bar X

        self.SetSizer(sizer)
        self.SetSize((640,360))

    def BrowserError(self,event):
        print("Error loading map")

    def OnButton(self,event):
        print("Button Pressed")

    def OnQuit(self,event):
        self.Destroy()
        
if __name__ == '__main__':
    app = wx.App()
    frame = MyBrowser(None)
    frame.Show()
    app.MainLoop()

交互式地图由 folium 库提供
用途（如果你想映射另一个区域）：

>>> import folium
>>> 
>>> fmap = folium.Map([-43.5321,172.6362],zoom_start=12)
>>> folium.Marker([-43.5321,popup='Marker1').add_to(fmap)
<folium.map.Marker object at 0x7f337bfbc0f0>
>>> fmap.save('maparea.html')

maparea.html 的代码是：

<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/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.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
    <style>html,body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    
            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
            <style>
                #map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
            </style>
        
</head>
<body>    
    
            <div class="folium-map" id="map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af" ></div>
        
</body>
<script>    
    
            var map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af = L.map(
                "map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af",{
                    center: [-43.5321,crs: L.CRS.EPSG3857,zoom: 12,zoomControl: true,preferCanvas: false,}
            );

            

        
    
            var tile_layer_d64f9485d3f04f208884b03df0df3148 = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e,under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.","detectRetina": false,"maxNativeZoom": 18,"maxZoom": 18,"minZoom": 0,"noWrap": false,"opacity": 1,"subdomains": "abc","tms": false}
            ).addTo(map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af);
        
    
            var marker_380e017eee4e45a3a998b0def6b43f67 = L.marker(
                [-43.5321,{}
            ).addTo(map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af);
        
    
        var popup_c8d785b72544491bbd41c414040772e6 = L.popup({"maxWidth": "100%"});

        
            var html_d8eec22dfe3d4f8fa665a60dfa5dcc82 = $('<div id="html_d8eec22dfe3d4f8fa665a60dfa5dcc82" style="width: 100.0%; height: 100.0%;">Marker1</div>')[0];
            popup_c8d785b72544491bbd41c414040772e6.setContent(html_d8eec22dfe3d4f8fa665a60dfa5dcc82);
        

        marker_380e017eee4e45a3a998b0def6b43f67.bindPopup(popup_c8d785b72544491bbd41c414040772e6)
        ;

        
    
</script>

cefpython python

如何在wxPython sizer中移动cefpython嵌入式浏览器

问题描述

解决方法

相关问答