使用 iframe 谷歌地图在多设备 Delphi 中嵌入 api答案

【问题标题】：Using iframe for google maps embed api in multi device Delphi使用 iframe 谷歌地图在多设备 Delphi 中嵌入 api
【发布时间】：2022-01-19 08:13:13
【问题描述】：

目前我有一个类似这样的代码，可以在我的 TWebBrowser 中显示带有我当前位置的谷歌地图

procedure TForm1.LocationSensor1LocationChanged(Sender: TObject; const
    OldLocation, NewLocation: TLocationCoord2D);
begin
  var URLString := Format('https://maps.google.com/maps?q=%s,%s&output=embed', [Format('%2.6f', [NewLocation.Latitude]), Format('%2.6f', [NewLocation.Longitude])]);

  WebBrowser1.Navigate(URLString);
end;

如果我使用我的网址为https://maps.google.com/maps?q=%s,%s，那么它可以正常工作，但是当我使用我的网址为https://maps.google.com/maps?q=%s,%s&output=embed 时，它会提示错误“Google Maps Embed API 必须在 iframe 中使用”，如图所示

有没有办法在我的 delphi 项目中使用 iframe？

【问题讨论】：

为什么在Format() 中使用Format()？改用这个：var URLString := Format('https://maps.google.com/maps?q=%2.6f,%2.6f', [NewLocation.Latitude, NewLocation.Longitude]); 也就是说，如果省略embed 参数有效，为什么要使用embed 参数？ iframe 是一个 HTML 元素，因此如果 API 需要 iframe，您必须动态创建一个 HTML 页面，其中包含请求更新 URL 的 iframe，然后将该 HTML 页面加载到浏览器中。
在Format() 上注明，我正在使用embed 参数，因为我只想要没有搜索栏的谷歌地图。

标签： android google-maps delphi iframe twebbrowser

【解决方案1】：

正如错误消息所述，Google 的嵌入式地图希望托管在 HTML <iframe> 中。 TWebBrowser 有一个 LoadFromStrings() 方法可以用于该目的，例如：

procedure TForm1.LocationSensor1LocationChanged(Sender: TObject;
  const OldLocation, NewLocation: TLocationCoord2D);
begin
  var URL := Format('https://maps.google.com/maps?q=%2.6f,%2.6f&output=embed', [NewLocation.Latitude, NewLocation.Longitude]);
  var HTML = Format('<iframe src="%s" width="%d" height="%d" style="border:0;" allowfullscreen="" loading="lazy"></iframe>', [URL, <DesiredWidth>, <DesiredHeight>]);
  WebBrowser1.LoadFromStrings(HTML, URL);
end;

【讨论】：