jueves, 11 de agosto de 2016

¿CÓMO VISUALIZAR UN PUNTO EN GOOGLE MAPS CON PYTHON-PYQT?


Hola a todos este ejercicio permite ubicar un punto en Google Maps en una interfaz gráfica de Python (PyQT), basta con ingresar las coordenadas latitud y longitud del punto. En una entrada anterior al Blog el ejercicio sólo mostraba el mapa con un punto asignado (míralo acá), pero en este ejercicio podemos mostrar el punto que se desee consultar.


PASO 1: Crear la interfaz gráfica en QT. 

Nota: El botón REGRESAR, no va a tener una funcionalidad en este ejercicio, en otra entrada servirá para explicar subventanas.

  
PASO 2: Convertir la extensión del archivo creado en QT  de .ui a .py
Este es el archivo generado en la conversión:
mapa.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'mapa.ui'
#
# Created by: PyQt4 UI code generator 4.11.4
#
# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s

try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName(_fromUtf8("Dialog"))
        Dialog.resize(596, 342)
        self.webView = QtWebKit.QWebView(Dialog)
        self.webView.setGeometry(QtCore.QRect(170, 10, 421, 291))
        self.webView.setUrl(QtCore.QUrl(_fromUtf8("about:blank")))
        self.webView.setObjectName(_fromUtf8("webView"))
        self.pushButton = QtGui.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(30, 120, 75, 23))
        self.pushButton.setObjectName(_fromUtf8("pushButton"))
        self.lineEdit = QtGui.QLineEdit(Dialog)
        self.lineEdit.setGeometry(QtCore.QRect(10, 30, 151, 20))
        self.lineEdit.setObjectName(_fromUtf8("lineEdit"))
        self.lineEdit_2 = QtGui.QLineEdit(Dialog)
        self.lineEdit_2.setGeometry(QtCore.QRect(10, 80, 151, 20))
        self.lineEdit_2.setObjectName(_fromUtf8("lineEdit_2"))
        self.label = QtGui.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(15, 10, 71, 20))
        self.label.setObjectName(_fromUtf8("label"))
        self.label_2 = QtGui.QLabel(Dialog)
        self.label_2.setGeometry(QtCore.QRect(10, 60, 61, 16))
        self.label_2.setObjectName(_fromUtf8("label_2"))
        self.pushButton_2 = QtGui.QPushButton(Dialog)
        self.pushButton_2.setGeometry(QtCore.QRect(510, 310, 75, 23))
        self.pushButton_2.setObjectName(_fromUtf8("pushButton_2"))
        self.pushButton_3 = QtGui.QPushButton(Dialog)
        self.pushButton_3.setGeometry(QtCore.QRect(430, 310, 75, 23))
        self.pushButton_3.setObjectName(_fromUtf8("pushButton_3"))

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(_translate("Dialog", "Dialog", None))
        self.pushButton.setText(_translate("Dialog", "ENCONTRAR", None))
        self.label.setText(_translate("Dialog", "LATITUD:", None))
        self.label_2.setText(_translate("Dialog", "LONGITUD:", None))
        self.pushButton_2.setText(_translate("Dialog", "SALIR", None))
        self.pushButton_3.setText(_translate("Dialog", "REGRESAR", None))

from PyQt4 import QtWebKit

PASO 3: Crear una función que encuentre el punto en el mapa. Esta es una función creada apartir de Google Maps JavaScript API y modificada para ubicar el punto que deseamos (Recuerde que necesita tener un API KEY para reemplazarlo en el código y le pueda funcionar).

browser.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
def localizacion(lat, lon):
    latitud=str(lat)
    longitud=str(lon)
    html= \
"""
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var myLatLng = {lat: """+latitud+""" , lng: """+longitud+"""};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Mapa Prueba!'
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
  </body>
</html>
"""
    return html

PASO 4: Crear el archivo ejecutable. 
codigo_mapa.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#!/usr/bin/python
# -*- coding: utf-8 -*-
'''
Código creado por: Gibson Sneyder Ramírez Moreno
correo: sramirez.udea@gmail.com
http://pythoninicios.blogspot.com.co/
'''
import sys
from mapa import *
from PyQt4.QtGui import QApplication
from PyQt4.QtCore import QUrl
from PyQt4.QtWebKit import QWebView
import browser

class showmap(QtGui.QDialog):
    def __init__(self,parent=None):
        QtGui.QWidget.__init__(self,parent)
        QWebView.__init__(self)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
              
        QtCore.QObject.connect(self.ui.pushButton, QtCore.SIGNAL('clicked()'),self.calcular)
        QtCore.QObject.connect(self.ui.pushButton_3, QtCore.SIGNAL('clicked()'),self.regresar)
        QtCore.QObject.connect(self.ui.pushButton_2, QtCore.SIGNAL('clicked()'),self.salir)

    def calcular(self):
        latitud=self.ui.lineEdit.text()
        longitud=self.ui.lineEdit_2.text()
        html=browser.localizacion(latitud,longitud)
        self.ui.webView.setHtml(html)
        
    def regresar(self):
        self.close()
        
    def salir(self):
        self.close()
        
if __name__== "__main__":
    app=QtGui.QApplication(sys.argv)
    myapp = showmap()
    myapp.show()
    sys.exit(app.exec_())

Al ejecutar, este es el resultado obtenido:


En este video podrás ver el funcionamiento:
 Muchas Gracias. Alguna duda la responderé con gusto.
By a la/s

5 comentarios:

  1. Unknown10 de noviembre de 2016, 2:15 a.m.

    Que blog tan genial Sneyder, me ha servido mucho, adicionalmente me gustaria saber si me podrias orientar sobre como puedo extraer en una lista los puntos GPS que resulten de dar click en diferentes partes del mapa.

    te agradeceria si me pudieras colaborar.

    ResponderBorrar
    Respuestas
    1. SNEYDER RAMIREZ17 de agosto de 2017, 6:03 p.m.

      Hola, apenas veo este mensaje. Muchas gracias. Me parece un ejercicio interesante y ¿cómo lo va a aplicar, qué función haría o la importancia de obtener estas coordenadas en una lista?

      Viendo el tiempo del mensaje. Si depronto ya lo hizo y lo quiere compartir en el blog es bienvenido o sino lo podemos construir.

      Salu2

      Borrar
  2. Unknown28 de julio de 2017, 4:39 p.m.

    Hello,

    Thanks for the video and for the explanation on this blog. Your post was very helpful. However, can you explain better how you pass the variables latitude and longitude from Python to Javascript? I tried to use your method ("""+latitud+""") similarly with my code but it doesn't work. Do you have any reference for that?

    ResponderBorrar
  3. SNEYDER RAMIREZ17 de agosto de 2017, 6:07 p.m.

    Hi.

    You can try search that information here: https://developers.google.com/maps/documentation/javascript/examples/?hl=es-419

    Bye

    ResponderBorrar
  4. Ale Duarte12 de diciembre de 2019, 6:34 p.m.

    Hola, ¿hay alguna manera de exportar esto a PyQT5?
    Designer ni siquiera tiene la opción de WebView

    ResponderBorrar

Suscribirse a: Comentarios de la entrada (Atom)