谷歌地图键与网站应用程序限制

Question

在 Google 云控制台中为 Map API 密钥应用“网站”选项应用程序限制时，即使在允许的 Web url 中它也停止工作。

遵循以下步骤：

从 API 和服务启用了 2 个 API（地图 JavaScript API、地理编码 API）
从密钥和凭证创建 API 密钥
应用的应用程序限制，因为我们想从我的托管网页使用此密钥。

我们有下面的 javascript 代码片段可以从客户端 Web 应用程序调用地理编码 api。

const latitude = 24.4564699;
const longitude = 54.4007989;

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        try {
            const data = JSON.parse(response);
            if (data.status === "OK" && data.results && data.results.length > 0) {
                const formattedAddress = data.results[0].formatted_address;
                console.log("formattedAddress" + formattedAddress);
            } else {
                console.log("Location not found");
            }
        } catch (error) {
            console.log("Error parsing response");
            console.error(error);
        }
    }
};
let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=<MAP_API_KEY>`;
xhttp.open("GET", url, true);
xhttp.send();

但是我们收到 request_denied 响应。

{
   "error_message" : "API keys with referer restrictions cannot be used with this API.",
   "results" : [],
   "status" : "REQUEST_DENIED"
}

Answer 1

您正在使用的网络服务无法使用带有引用限制的密钥。使用作为 JavaScript API v3 一部分的地理编码器以及带有引荐来源网址限制的密钥。

概念证明小提琴（根据文档中的示例修改）

const latitude = 24.4564699;
const longitude = 54.4007989;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: latitude,
      lng: longitude
    },
    zoom: 8
  });
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();
  geocodeLatLng({
    lat: latitude,
    lng: longitude
  }, geocoder, map, infowindow);
}

function geocodeLatLng(latlng, geocoder, map, infowindow) {
  geocoder
    .geocode({
      location: latlng
    })
    .then((response) => {
      if (response.results[0]) {
        console.log(JSON.stringify(response.results[0]));
        if (response.results[0].viewport) {
          map.fitBounds(response.results[0].viewport)
          console.log("viewport")
        } //else if (response.results[0].)
        const marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });

        infowindow.setContent(response.results[0].formatted_address + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        setTimeout(500, function() {
          map.setCenter(latlng)
        })
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>

<head>
  <title>Reverse Geocoding</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>

</html>

谷歌地图键与网站应用程序限制

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

1个回答

最新问题

谷歌地图键与网站应用程序限制

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

1个回答

最新问题

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