1

我试图在 webview 中显示谷歌地图，但它说

Google Maps Platform 拒绝了您的请求。无效的请求。'pb' 参数无效。

但是当我在网络浏览器上渲染相同的 iframe 时，它​​工作得很好

这是我试图在 webview 中呈现的内容，这是存储在变量iframeData中的字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
    <body>
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14988.154038971099!2d57.510438!3d-20.090677!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc479c0ed4774c8e7!2sThe+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius!5e0!3m2!1sen!2smu!4v1513055435928" width="340.0" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
    </body>
</html>

这是我将这个 iframe 渲染到 webview 中的 Android 代码

String iframeData = //look above

WebView webViewMap = (WebView) rootView.findViewById(R.id.webViewMap);
WebSettings settings = webViewMap.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(false);
settings.setUseWideViewPort(false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
    settings.setAllowUniversalAccessFromFileURLs(true);
}
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webViewMap.loadData(iframeData, "text/html", null);

截屏

4

3 回答 3

1

一个无缝的方法是：

  1. 在Google 地图上搜索您想要添加到 iframe 中的地点

  2. 点击分享按钮分享按钮

  3. 当模式打开时，单击嵌入地图选项卡复制html按钮

  4. 复制您所追求的地图大小的 HTML 代码，并将其粘贴到您的 iframe 中。

于 2021-02-28T20:08:53.720 回答
1

您示例中的 URLiframe看起来像是从 Google 地图网站上的共享位置获得的链接。通常不应将此 URL 视为 Google Maps Platform 产品。但是，出于某种原因，Google 将其视为WebView组件中的 Google Maps Platform。

我认为这是谷歌方面的一个错误。

解决方法是将用于共享的 URL 替换为来自Google Maps Embed API的 URL 。在这种情况下，您将拥有正确的 Google Maps Platform 链接，它应该可以按预期工作。请注意，您需要一个有效的 API 密钥才能使用 Google Maps Embed API。

代码片段是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
    <body>
      <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=The+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" allowfullscreen></iframe>
    </body>
</html>

你应该用你的替换我的 API 密钥。

我希望这有帮助！

于 2019-01-31T08:34:56.387 回答
-2

正确答案：

使用 URLEncoder.encode(...) 对 URL 进行编码以转义字符并解决问题。

String googleMapLink = "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14988.154038971099!2d57.510438!3d-20.090677!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc479c0ed4774c8e7!2sThe+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius!5e0!3m2!1sen!2smu!4v1513055435928";
String encodedUrl = null;
try {
    encodedUrl = URLEncoder.encode(googleMapLink,"UTF-8");
} catch (UnsupportedEncodingException e) {
    e.printStackTrace();
}

String iframe = "<iframe src=\""+ encodedUrl +"\" width=\"100%\" height=\"100%\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>";

googlemap_webView.getSettings().setJavaScriptEnabled(true);
googlemap_webView.loadData(iframe, "text/html", "utf-8");
于 2019-08-15T12:13:02.713 回答