Delphi + Google 地图 Api：使用折线导致 "Script Error"

Question

我刚开始在 Delphi 中编程，Google 地图 Api 有问题。我想要一个带有 google 地图的表格并在其上画线（来自数据库的坐标）。不幸的是，当我尝试在地图上放置 'Polyline' 时，错误发生了。

Line: 0

Char: 0

Error: Script error

Code: 0

Url: https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/pl_ALL/poly.js

不知道如何解决。

仅供参考，我正在使用 RAD Studio 10.2 并使用 TWebBrowser 组件。

我的代码：

unit Unit2;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.OleCtrls, SHDocVw, MSHTML ;

type
  TForm2 = class(TForm)
    WebBrowser1: TWebBrowser;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    Doc: Variant;
    HTMLWindow2: IHTMLWindow2;
    { Public declarations }
  end;

var
  Form2: TForm2;

implementation

{$R *.dfm}

var
  HTMLStr: AnsiString =
'<!DOCTYPE html>' +
'<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">' +
'  <head>' +
'   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ' +
'    <style>' +
'       #map {' +
'        height: 400px;' +
'        width: 100%;' +
'       }' +
'    </style>' +
'  </head>' +
'  <body>' +
'    <h3>My Google Maps Demo</h3>' +
'    <div id="map"></div>' +
'    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=***&callback=initMap"></script>'+
'    <script>'+
'      function initMap() {' +
'        var map = new google.maps.Map(document.getElementById("map"), {' +
'          zoom: 3,' +
'          center: {lat: 0, lng: -180},' +
'          mapTypeId: "terrain"' +
'        });' +

'        var flightPlanCoordinates = [' +
'          {lat: 37.772, lng: -122.214},' +
'          {lat: 21.291, lng: -157.821},' +
'          {lat: -18.142, lng: 178.431},' +
'          {lat: -27.467, lng: 153.027}' +
'        ];' +
'        var flightPath = new google.maps.Polyline({' +
'          path: flightPlanCoordinates,' +
'          geodesic: true,' +
'          strokeColor: "#FF0000",' +
'          strokeOpacity: 1.0,' +
'          strokeWeight: 2' +
'        });' +

'        flightPath.setMap(map);' +
'      }' +
'    </script>' +
'  </body>' +
'</html>';

procedure TForm2.FormCreate(Sender: TObject);
begin
  if NOT Assigned(WebBrowser1.Document) then
    WebBrowser1.Navigate('about:blank');

  Doc := WebBrowser1.Document;
  Doc.Clear;
  Doc.Write(HTMLStr);
  Doc.Close;
  HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;
end;

end.

Answer 1

要使您的样本达到运行，需要进行两项更改：

1) 交换脚本标签
将行 script src="https://maps.googleapis.com/.... 放在下一个脚本块之后。您的 initMap 函数需要在加载 google映射api。否则找initMap函数找不到。

进行更改后，您将看到加载的地图没有线条。但是随后您会在地图顶部看到一条错误，指出不支持该浏览器。

运行运行 this in Delphi 时错误信息不清楚。但是，如果您将嵌入的 HTML 文本保存到文件中并在 Chrome 中打开，您可以在 javascript 控制台中看到此错误消息。

2) 为嵌入式 TWebBrowser 启用 IE 11 模式。
在我的项目中，我永远无法获得文档类型或元标记以使 IE 正常运行。但是，设置仿真模式注册表标志确实有效。该标志需要根据您的可执行文件名进行设置。我使用

的值

"11000": IE11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 edge mode. Default value for IE11.

有关注册表项的信息位于 MDSN 帮助页面：Internet Feature Controls (B..C)，在“浏览器仿真”部分下。

您还可以在这个 Whosebug 中看到一些讨论 post "How to have Delphi TWebbrowser component running in IE9 mode?"

确保您注意注册表位置。因为这是本地计算机，所以如果您的应用程序是 32 位运行在 64 位 OS 上运行，则您需要在 WOW6432Node 下。

HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

添加一个包含您的 exe 名称（如 "project1.exe"）和值 11000 的 DWORD 值。

Delphi + Google 地图 Api：使用折线导致 "Script Error"

Delphi + Google Map Api: Using Polyline causes "Script Error"

delphi

google-maps-api-3

twebbrowser