正文 

当前位置： 首页 > 知识 >

使用 Python“运行 Javascript”输入更新 Google 地图标记位置

     2023-03-30     218

关键词：

【中文标题】使用 Python“运行 Javascript”输入更新 Google 地图标记位置【英文标题】：Update Goole Maps Marker position with Python 'runJavascript' input 【发布时间】：2018-02-15 01:05:18 【问题描述】：

我正在尝试使用 PyQt5 创建一个简单的应用程序，并且我想显示一个谷歌地图网页。 我想在地图上的某个位置显示一个标记，该位置取决于用户在 python 中修改的一些变量。 如何使用runJavascript 做到这一点？

这里是html文件：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

 function geocodePosition(pos) 
  geocoder.geocode(
    latLng: pos
  , function(responses) 
    if (responses && responses.length > 0) 
      updateMarkerAddress(responses[0].formatted_address);
     else 
      updateMarkerAddress('Cannot determine address at this location.');
    
  );


function updateMarkerStatus(str) 
  document.getElementById('markerStatus').innerHTML = str;


function updateMarkerPosition(latLng) 
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');


function updateMarkerAddress(str) 
  document.getElementById('address').innerHTML = str;



var geocoder = new google.maps.Geocoder();
var map;


function initialize() 
  var latLng = new google.maps.LatLng(40.767367, -111.848007);
  map = new google.maps.Map(document.getElementById('mapCanvas'), 
    zoom: 11,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );
    var marker = new google.maps.Marker(
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  );

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() 
    updateMarkerAddress('Dragging...');
  );

  google.maps.event.addListener(marker, 'drag', function() 
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  );

  google.maps.event.addListener(marker, 'dragend', function() 
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  );

//  return latLng



// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
  <style>
  #mapCanvas 

    # width: 1000px;
    width: 102%;
    height: 500px;
    float: left;
    margin-left: -7px;
    margin-right: -10px;
    margin-top: -7px;
    margin-bottom: 10px;
  
  #infoPanel 
    float: center;
    margin-left: 20px;
  
  #infoPanel div 
    margin-bottom: 10px;
  
  </style>

      <font size="3" color="black" face="verdana">
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <font size="3" color="black" face="verdana">
    <!-- <b>Marker status:</b> -->
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <font size="3" color="black" face="verdana">
    <b>Current position:</b>
    <div id="info"></div>
    <!--<b>Closest matching address:</b>-->
    <!--<div id="address"></div>-->
  </div>
</body>
</html>

这里是 PyQt5 gui：

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_tmy3page(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(900, 620)
        MainWindow.setMinimumSize(QtCore.QSize(900, 620))
        MainWindow.setMaximumSize(QtCore.QSize(900, 620))
        MainWindow.setWindowTitle("")
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.html_code = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
        self.html_code.setGeometry(QtCore.QRect(0, 0, 901, 621))
        self.html_code.setUrl(QtCore.QUrl("about:blank"))
        self.html_code.setObjectName("html_code")
        MainWindow.setCentralWidget(self.centralwidget)

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

    def retranslateUi(self, MainWindow):
        pass

from PyQt5 import QtWebEngineWidgets

这里是 Python 代码：

import sys
from PyQt5.QtWidgets import *
from GUI_tmy3 import *

class ShowMap_fun(QMainWindow):
    def __init__(self):
        super().__init__()
        self.map_ui = Ui_tmy3page()
        self.map_ui.setupUi(self) 
     self.map_ui.html_code.load(QtCore.QUrl.fromLocalFile(QtCore.QDir.current().filePath("useless.html")))



if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = ShowMap_fun()
    ex.show()
    sys.exit(app.exec_())

我正在考虑以这种方式修改 Html 文件中的 Initialize 函数：

function initialize(lat_init, long_init)

var latLng = new google.maps.LatLng(lat_init, long_init);

然后从 Python 代码中传递坐标：

argument_init = "initialize('" + str(40) + "','" + str(-111) + "')"
self.map_ui.html_code.page().runJavaScript(argument_init)

但这似乎不起作用。如何访问Initialize函数并输入坐标？

【问题讨论】：

【参考方案1】：

您必须注释以下行，因为它会在加载应用程序时调用该函数：

// Onload handler to fire off the app.
//google.maps.event.addDomListener(window, 'load', initialize);

您还必须在页面完成加载页面时调用该函数：

class ShowMap_fun(QMainWindow):
    def __init__(self):
        super().__init__()
        self.map_ui = Ui_tmy3page()
        self.map_ui.setupUi(self) 
        self.map_ui.html_code.load(QtCore.QUrl.fromLocalFile(QtCore.QDir.current().filePath("useless.html")))

        argument_init = "initialize('" + str(40) + "','" + str(-111) + "')"
        self.map_ui.html_code.loadFinished.connect(
            lambda ok: self.map_ui.html_code.page().runJavaScript(argument_init))

【讨论】：

使用python在pycharm中运行javascript代码(代码片段)

目标：使用python在pycharm中运行javascript代码，并且输出结果！查找资料发现要想运行javascript，需要在pycharm安装node.js插件，但是我装的可能是版本问题，我在自己的插件里并未找到node.js，所以我这里用... 查看详情

如何在沙箱中使用 Rhino for Java 运行 Javascript？

】如何在沙箱中使用RhinoforJava运行Javascript？【英文标题】：HowcanyourunJavascriptusingRhinoforJavainasandbox?【发布时间】：2010-09-1018:29:14【问题描述】：我们的部分java应用程序需要运行由非开发人员编写的javascript。这些非开发人员正在... 查看详情

javascript复习笔记

/*Javascript:用来在页面中编写特效，和HTML、CSS一样都是有浏览器解析Javascript语言：一、JS如何运行（javascript,jscript,vbscript,applet...）二、输出alert(什么类型都可以)；可以做调试用document.write("字符串")；三、如何在HTML文档中使用JS... 查看详情

vscode使用教程-7.coderunner运行javascript代码(代码片段)

前言写完javascript代码，在VSCode里面需要单独运行javascript文件，可以用到CodeRunner插件.javascript代码运行需要用到node.js环境。遇到问题当写完js代码，希望能直接运行右上角没有运行按钮安装node.js官网下载地址：http... 查看详情

使用 Shiny `renderUI` 时无法运行 JavaScript 代码

】使用Shiny`renderUI`时无法运行JavaScript代码【英文标题】：CannotrunJavaScriptcodewhenShiny`renderUI`isused【发布时间】：2021-09-2914:34:05【问题描述】：我正在尝试将JS脚本（“全选”框）应用到动态呈现的UI，但以下操作不起作用：library(sh... 查看详情

如何使用 FormHelper 或其他方法呈现单击时运行 javascript 的图像链接？

】如何使用FormHelper或其他方法呈现单击时运行javascript的图像链接？【英文标题】：HowcanIbyusingtheFormHelper,orsomeothermethod,renderanimagelinkthatrunsjavascriptwhenclicked?【发布时间】：2010-05-1022:52:30【问题描述】：背景：我想渲染这个：<ahr... 查看详情

使用 Rhino 代替 ScriptEngine 在 Java 中运行 Javascript 代码

】使用Rhino代替ScriptEngine在Java中运行Javascript代码【英文标题】：UsingRhinoinsteadofScriptEnginetorunJavascriptcodeinJava【发布时间】：2016-01-1612:08:01【问题描述】：基于convertingstringrepresentationofunknowndate-formattoDateinjava的讨论，我想在我的App-... 查看详情

Base64 加密后运行 JavaScript 代码

】Base64加密后运行JavaScript代码【英文标题】：RunJavaScriptCodeafterBase64encryption【发布时间】：2013-03-2820:38:36【问题描述】：我已经使用base64方法加密了我的JavaScript代码，如here所示。但是当我使用document.ready运行编码函数时，JavaScri... 查看详情

loadrunner12_脚本中运行javascript

...函数：web_js_run，该函数仅在LR12版本提供支持，LR11不支持JavaScript的运行。　　LR配置：开启了允许JavaScript运行：Replay→RunTimeSettings→Preferences→Javascript→勾选“EnaberunningJav 查看详情

无法在 Sencha-Touch2 中使用 Ext.Ajax 运行 javascript？

】无法在Sencha-Touch2中使用Ext.Ajax运行javascript？【英文标题】：UnabletorunjavascriptusingExt.AjaxinSencha-Touch2?【发布时间】：2012-09-2016:25:40【问题描述】：我在论坛here中讨论过的Sencha-Touch中使用htmlPanel.js来显示本地html内容。我可以使用... 查看详情

WebClient 运行 javascript

】WebClient运行javascript【英文标题】：WebClientrunsjavascript【发布时间】：2011-07-1908:10:21【问题描述】：我有一个。aspx页面，其中包含一些控制分页的JavaScript函数。我可以通过webbrowser在WebBrowser1_DocumentCompleted中使用以下方法运行这... 查看详情

你如何通过终端运行 JavaScript 脚本？

】你如何通过终端运行JavaScript脚本？【英文标题】：HowdoyourunJavaScriptscriptthroughtheTerminal?【发布时间】：2012-01-2121:48:24【问题描述】：例如，如果您要运行Python脚本，您可以输入pythonfilename.py或者如果您想运行C程序makefilename然后.... 查看详情

我可以在 Dart 上运行所有 JavaScript 功能吗？ [关闭]

】我可以在Dart上运行所有JavaScript功能吗？[关闭]【英文标题】：CanIRunAllTheJavaScriptFeaturesonDart?[closed]【发布时间】：2021-06-1117:49:42【问题描述】：我是一名JavaScript开发人员，对移动开发完全陌生，顺便说一下，我正在使用Flutter... 查看详情

使用 MVC5 C# 和 Razor 在局部视图中运行 javascript

】使用MVC5C#和Razor在局部视图中运行javascript【英文标题】：RunjavascriptinapartialviewwithMVC5C#andRazor【发布时间】：2015-02-0311:36:10【问题描述】：我有一个使用Razor引擎的MVC5和C#中的小型Web应用程序。在我的代码中，我有一个主视图，... 查看详情

nodejs优缺点及安装步骤

Node本身运行V8JavaScript。V8JavaScript引擎是Google用于其Chrome浏览器的底层JavaScript引擎。Google使用V8创建了一个用C++编写的超快解释器，该解释器拥有另一个独特特征：您可以下载该引擎并将其嵌入任何应用程序。V8JavaScript引擎并不... 查看详情

python爬虫编程思想（99）：使用selenium执行javascript代码(代码片段)

...页面，不过可以使用Selenium的execute_script方法直接运行JavaScript代码，以便扩展Selenium的功能。下面的例子会使用Selenium的execute_script方法让京东商城首页滚动到最底端，然后弹出一个对话框。fromseleniumimportwebdriverbrowser... 查看详情

剪刀石头布。使用数学确定赢/输/平？

】剪刀石头布。使用数学确定赢/输/平？【英文标题】：Rock,Paper,Scissors.Determinewin/loss/tieusingmath?【发布时间】：2012-07-0719:01:45【问题描述】：所以我在写这个函数的时候正在写一个石头剪刀布游戏：a是玩家一手，b是玩家二手。... 查看详情

python制作gif生成工具，斗图再也不会输啦

作者| 周萝卜来源|萝卜大杂烩在当前无表情包不会聊天的时代，怎么也不能输在表情包数量不足上啊，今天咱们就来制作一个gif生成工具，用来制作表情包也太好用啦先来看看整体效果页面设计本文工具的页面，... 查看详情