个人中心
gpt4 book ai didi

javascript - 向 Google Maps API 发出 GET 请求返回错误请求 400 错误 - javascript

转载 作者：行者123 更新时间：2023-11-30 20:07:42 24 4
gpt4 key购买 nike

你好 :) 只是想在这篇文章的开头说我是一名非常初级的开发人员，并且仍在努力了解如何使用 os API!

所以我试图创建一个页面，允许用户在 map 上放置标记，然后使用标记的纬度和经度向 google maps API 发出获取请求，以获取放置标记的城市名称然后将城市名称放入 map 旁边的面板中。但是，我的 GET 请求有问题，它在控制台中返回 400 错误请求错误。

我想显示放置标记的所有城市的列表，因此我尝试在 URL 中使用插值，以便它可以反复用于放置的图钉返回的所有纬度和经度。所以我使用了以下网址(在我的代码中，我输入了我的实际 API key ，但在这篇文章中将其取出)。

我想知道如何修复 URL，以便它仍然可以在任何纬度和经度上使用，而无需硬编码它们的值，这样它就会返回 JSON 我可以深入研究获取城市名称返回 400 错误。我已经用谷歌搜索了又用谷歌搜索，但是没有关于使用插值创建 url 来向其发出 API 请求的内容，也没有说明为什么对 google maps api 的获取请求在发出获取请求时会返回 400 错误。我已经用谷歌搜索了几个小时并阅读了 Google Maps API 文档，但一直无法找到/理解我需要什么。

如有任何帮助，我们将不胜感激。

这是我所有的代码(请注意，我不得不删除我的 API key ，我认为没有它代码片段将无法运行，但我不确定如何发布它!抱歉，如果这不是正确的做):

console.log('hello world');


let myPlaces = [];
let map;
let findCityLat;
let findCityLng;



  initMap = function() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 36.2048, lng: 138.2529},
      zoom: 6.8
    });



    map.markerList = [];
    map.addListener('click', addPlace);

    const placesFromLocalStorage = JSON.parse(localStorage.getItem('myPlaces'));
    if (Array.isArray(placesFromLocalStorage)) {
      myPlaces = placesFromLocalStorage;
      renderMarkers();                  
    }
                                 



    function addPlace(event) {
    

      myPlaces.push({
        position: event.latLng
      });

      console.log(myPlaces);


      localStorage.setItem('myPlaces', JSON.stringify(myPlaces)); 
      renderMarkers();                                            
    }

    function getCity() {
      for (var i = 0; i < myPlaces.length; i++) {
        findCityLat = myPlaces[i].position.lat;
        findCityLng = myPlaces[i].position.lng;
        console.log(`Lat: ${findCityLat}`);
        console.log(`Lng: ${findCityLng}`);


        const fetchCity = function () {
          const xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            console.log('readyState', xhr.readyState);
            
            if (xhr.readyState !== 4) {
              return;
            }

            const info = JSON.parse( xhr.response ); 

            const p = document.createElement('p');
            p.innerHTML = `<strong>${ info.result }`; 
            document.body.appendChild( p );
          }
          xhr.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?latlng=${findCityLng},${findCityLng}&sensor=true&key=MY_API_KEY`);
          xhr.send(); // Asynchronous

        };

        window.onload = function() {
          setTimeout(fetchCity,1500)

      }

    }

  }
    getCity();

    function renderMarkers() {
      map.markerList.forEach(m => m.setMap(null)); 
      map.markerList = [];

      myPlaces.forEach((place) => {                     
        const marker = new google.maps.Marker({         
          position: place.position,                     
          map: map
        });

        map.markerList.push(marker);
      });
    }

  }



     initMap();
@import url('https://fonts.googleapis.com/css?family=Quicksand');


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main-container {
  margin: 15px;
  display: flex;
}

.sidebar {
  border: rgba(101, 171, 236, 0.56) solid 3px;
  font-size: 0.75em;
  height: 50vh;
  width: 37vw;
  margin: auto;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  padding: 2px;
}

#map {
  height: 50vh;
  width: 60vw;
  margin: auto;
}

.earthIcon {
  width: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Favourite Places</title>
  <link rel="stylesheet" href="style/master.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="shortcut icon" href="images/earth.ico" type="image/x-icon">

</head>
<body>
  <div class="main-container">
    <div class="sidebar">
      <h1>My favourite places in the <img class="earthIcon" src="images/earth.ico"</h1>
      <div id="favPlacesList">

      </div>
    </div>

    <div class="main-content-area">
      <div id="map"></div>
    </div>
  </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>


  <script src="js/main.js"></script>

</body>

</html>

最佳答案

您正在向以下网址发出请求:

`https://maps.googleapis.com/maps/api/geocode/json?latlng=${findCityLng},${findCityLng}&sensor=true&key=MY_API_KEY`

但是，这个url包含两倍的经度，而不是包含纬度和经度。

它应该更好地工作:

`https://maps.googleapis.com/maps/api/geocode/json?latlng=${findCityLat},${findCityLng}&key=MY_API_KEY`

请注意:

  • 虽然不是错误的原因，但我删除了 sensor 参数，因为它不再需要(来源:documentation)
  • 您可以(但不必)使用 Javascript API 中的反向地理编码.在引擎盖下，它执行您正在做的事情，调用地理编码 http url，但由于您在 javascript 环境中工作，因此您的代码可能更简单。

关于javascript - 向 Google Maps API 发出 GET 请求返回错误请求 400 错误 - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52714159/

24 4 0
文章推荐： javascript - 通过键从对象合并到对象数组
文章推荐： javascript - 无法将 d3 向量附加到传单 map
文章推荐： c++ - C/C++ 中的 BST super 节点生成
文章推荐： c - 我收到错误请帮助我解决此错误..我在下面编写了代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com