Google 地图平台拒绝了您的请求。 “pb”参数无效

问题描述 投票：0回答：6

我试图在网络视图中显示谷歌地图，但它说

Google 地图平台拒绝了您的请求。无效请求。 “pb”参数无效。

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

这是我试图在网络视图中渲染的内容，这是存储在变量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>

这是我的 Android 代码，用于将此 iframe 渲染到 webview 中

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);

Screenshot

android google-maps android-webview google-maps-embed
6个回答
3
投票

示例中 

iframe
内的 URL 看起来像是从 Google 地图网站上的共享位置获取的链接。通常，不应将此网址视为 Google Maps Platform 产品。但是，出于某种原因，Google 在 
WebView
组件中将其视为 Google 地图平台。

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

解决方法是将共享 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 密钥替换我的 API 密钥。

我希望这有帮助！

2
投票

对此的无缝方法是：

  1. 在 Google 地图

    上搜索您想要包含在 iframe 中的地点

  2. 点击分享按钮share button

  3. 模式打开后，单击“嵌入地图”选项卡 copy html button

  4. 复制您想要的地图尺寸的 HTML 代码，并将其粘贴到您的 iframe 中。

1
投票

我在 React JS 中遇到了类似的挑战，但能够找到有效的解决方案。

解决方案：

要在 React 中创建动态 Google 地图，您可以使用 useEffect 钩子来更新 iframe 元素的 src 属性，其中 URL 包含作为 props 传递的纬度和经度值。以下是实施方法：

import React, { useEffect } from "react";

function GoogleMap({ lat, lon }) {
  useEffect(() => {
    const iframeData = document.getElementById("iframeId");
    iframeData.src = `https://maps.google.com/maps?q=${lat},${lon}&hl=es;&output=embed`;
  }, [lat, lon]);

  return (
    <div>
      <iframe id="iframeId" height="500px" width="100%"></iframe>
    </div>
  );
}

export default GoogleMap;

在此代码中， useEffect 钩子用于使用包含作为 props 传递的纬度和经度值的 URL 来更新 iframe 元素的 src 属性。 useEffect 钩子具有 lat 和 lon 作为依赖项，这意味着每次这些值发生变化时都会运行该效果。

要在 React 应用程序中使用此组件，您可以导入它并将纬度和经度值作为 props 传递，如下所示：

import React from "react";
import GoogleMap from "./GoogleMap";

function App() {
  const lat = 37.7749;
  const lon = -122.4194;

  return (
    <div>
      <GoogleMap lat={lat} lon={lon} />
    </div>
  );
}

export default App;

在此示例中，lat 和 lon 值是硬编码的，但您可以从应用程序的其他部分或 API 响应等动态传递它们。

我希望这有帮助！

0
投票

原问题： 当尝试使用 iframe 嵌入“Hotel Yak & Yeti”的 Google 地图位置时，嵌入 URL 中的“pb”参数导致错误。酒店名称中的特殊字符“&”可能是问题的原因。

解决方案： 为了解决这个问题，我删除了酒店名称中的特殊字符，结果是“Hotel Yak Yeti”。然后，我相应地编辑了 URL 中的“pb”参数。此调整可确保 URL 得到正确编码和验证。

原始 Google 嵌入式 URL：

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14128.750188412732!2d85.3197981!3d27.7114951!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19042204f6a1%3A0xa7af95e7f7d75e66!2sHotel%20Yak%20%26%20Yeti!5e0!3m2!1sen!2snp!4v1690259560583!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

更新的嵌入网址：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.187395792953!2d85.31518467397605!3d27.711499772684373!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19042204f6a1%3A0xa7af95e7f7d75e66!2sHotel%20Yak%20Yeti!5e0!3m2!1sen!2snp!4v1689753786090!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

将更新后的 URL 保存到数据库时，我使用“Hotel%20Yak%20Yeti”来确保酒店名称的 URL 编码正确。这样，“Hotel Yak Yeti”的嵌入式 Google 地图位置就可以在我的网站上无缝运行。

0
投票
{ const iframeData = document.getElementById("iframeId"); iframeData.src = `https://maps.google.com/maps?q=${lat},${lon}&hl=es;&output=embed`; }, [纬度, 经度]); 返回 （ ）； } 导出默认GoogleMap 100091552220885
-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");
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.