有使用Python 3

我建立一个程序，它可以显示与标记的地图根据从数据库中特定坐标PyQt4的QWebView查看地图，所以这个过程是：有使用Python 3

使用Get从OSM地图（大青叶）
添加标记
保存映射作为HTML
显示在QWebView的map.html。

但是，如果坐标总是在变化，例如（车辆跟踪系统），这种方式是不实际的。

反正是有可能让我在地图避免了以前的工艺上添加或更新标记，而无需创建map.html文件然后加载它QWebView则表明它每一次。

感谢

来源

2017-08-30 Ayser

前段时间我创造了一个小型图书馆使用的PyQt和Google Maps或OpenStreetMap，因为你的问题我添加了这个功能，这样你可以从这个link下载代码，并尝试以显示地图标记例如：qOSMExample2.py

在这个答案，我会告诉你我的代码的最重要的部分，让你可以添加自定义的功能。

QWebView支持JavaScript，所以我用单张库，这是包含在HTML，如下图所示：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
 

 

 
    <style type="text/css"> 
 
\t \t \t html { height: 100%; } 
 
\t \t \t body { height: 100%; margin: 0; padding: 0 } 
 
\t \t \t #mapid { height: 100% } 
 
    </style> 
 

 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" 
 
      integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" 
 
      crossorigin=""/> 
 

 
    <script src="https://unpkg.com/[email protected]/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>

此外，如果我们观察我已导入qOSM。 JS文件实现创建，移动地图，并与标记相同的逻辑。

另一个重要的是为它的PyQt为我们提供了2个功能进行交互Python和JavaScript的：

void QWebFrame::addToJavaScriptWindowObject(const QString & name, QObject * object)

Make object available under name from within the frame's JavaScript context. The object will be inserted as a child of the frame's window object. [...]

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

QVariant QWebFrame::evaluateJavaScript(const QString & scriptSource)

Evaluates the JavaScript defined by scriptSource using this frame as context and returns the result of the last executed statement.

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

第一个功能可以让我们嵌入一个Python对象在js和所以我们可以从JS输出信号，并将其连接到蟒蛇插槽。第二个是面向执行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://

输出：

来源

2017-08-31 04:58:31 eyllanesc

非常感谢您的回答，这正是我所期待的:)。我对你的库做了一些修改，它对我很有帮助。 – Ayser

请不要忘记标记我的答案是正确的，如果你有任何问题，图书馆给我写一封电子邮件来帮助你。 – eyllanesc

好的，你做得很好，谢谢 – Ayser

有使用Python 3

回答

相关问题