您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用python 3使用PyQt4 QWebView查看地图

使用python 3使用PyQt4 QWebView查看地图

不久前,我创建了一个小图书馆,使用PyQt和Google MapsOpenStreetMap在地图中显示标记,由于您的问题,我添加了此功能,因此您可以从此链接下载代码并尝试示例:qOSMExample2.py

在此答案中,我将向您展示代码中最重要的部分,以便您可以添加自定义功能

QWebView支持javascript,因此我使用了传单库,它包含在html中,如下所示:

<!DOCTYPE html>

<html>

<head>

    <Meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>





    <style type="text/css">

            html { height: 100%; }

            body { height: 100%; margin: 0; padding: 0 }

            #mapid { height: 100% }

    </style>



    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"

          integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="

          crossorigin=""/>



    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"

            integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="

            crossorigin=""></script>



    <script type="text/javascript" src="qOSM.js"></script>

</head>

<body onload="initialize()">

<div id="mapid" style="width:100%; height:100%"></div>

</body>

</html>

另外,如果我们观察到,我已经导入了 文件,该文件实现了创建,移动地图以及与标记相同的逻辑。

一个重要的是将python与javascript进行交互pyqt为我们提供了2个功能

使对象在框架的JavaScript上下文中的名称下可用。该对象将作为框架的窗口对象的子对象插入。[…]

self.page().mainFrame().addToJavaScriptWindowObject("qtWidget", self)

使用此框架作为上下文,评估scriptSource定义的JavaScript,并返回最后执行的语句的结果。

def runScript(self, script):
    return self.page().mainFrame().evaluateJavaScript(script)

一个功能允许我们在js中嵌入python对象,因此我们可以从js输出信号并将它们连接到python插槽。第二个面向执行js函数并接收返回的内容。总之,第一个用于异步获取答案,第二个用于同步获取答案。

在下一部分中,我展示了实现上述功能的js:

// Where you want to render the map.



var map;



var markers = [];



var LeafIcon;



function initialize() {

    var element = document.getElementById('mapid');



    map = L.map(element);



    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(map);



    if (typeof qtWidget !== 'undefined') {



        map.on('dragend', function () {

            center = map.getCenter();

            qtWidget.mapMoved(center.lat, center.lng);

        });



        map.on('click', function (ev) {

            qtWidget.mapClicked(ev.latlng.lat, ev.latlng.lng);

        });



        map.on('dblclick', function (ev) {

            qtWidget.mapDoubleClicked(ev.latlng.lat, ev.latlng.lng);

        });



        map.on('contextmenu', function (ev) {

            qtWidget.mapRightClicked(ev.latlng.lat, ev.latlng.lng);

        });

    }



    LeafIcon = L.Icon.extend({

        options: {

            shadowUrl: 'leaf-shadow.png',

            iconSize: [38, 95],

            shadowSize: [50, 64],

            iconAnchor: [22, 94],

            shadowAnchor: [4, 62],

            popupAnchor: [-3, -76]

        }

    });

}



function osm_setCenter(lat, lng) {

    //console.log(lat);

    map.panTo(new L.LatLng(lat, lng));

}



function osm_getCenter() {

    return map.getCenter();

}



function osm_setZoom(zoom) {

    map.setZoom(zoom);

}



function osm_addMarker(key, latitude, longitude, parameters) {



    if (key in markers) {

        osm_deleteMarker(key);

    }



    if ("icon" in parameters) {



        parameters["icon"] = new L.Icon({

            iconUrl: parameters["icon"],

            iconAnchor: new L.Point(16, 16)

        });

    }



    var marker = L.marker([latitude, longitude], parameters).addTo(map);



    if (typeof qtWidget !== 'undefined') {



        marker.on('dragend', function (event) {

            var marker = event.target;

            qtWidget.markerMoved(key, marker.getLatLng().lat, marker.getLatLng().lng);

        });



        marker.on('click', function (event) {

            var marker = event.target;

            //marker.bindPopup(parameters["title"]);

            qtWidget.markerClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);

        });



        marker.on('dbclick', function (event) {

            var marker = event.target;

            qtWidget.markerClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);

        });



        marker.on('contextmenu', function (event) {

            var marker = event.target;

            qtWidget.markerRightClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);

        });

    }



    markers[key] = marker;

    return key;

}



function osm_deleteMarker(key) {

    map.removeLayer(markers[key]);

    delete markers[key];

}



function osm_moveMarker(key, latitude, longitude) {

    marker = markers[key];

    var newLatLng = new L.LatLng(latitude, longitude);

    marker.setLatLng(newLatLng);

}



function osm_posMarker(key) {

    marker = markers[key];

    return [marker.getLatLng().lat, marker.getLatLng().lng];

}





http://

输出

python 2022/1/1 18:41:46 有529人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶