有使用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

回答

相關問題