Выполнение запроса GET к API Карт Google, возвращающего ошибку 400 неверных запросов - javascript

1

Привет :) Просто хочу предисловие к этому сообщению, сказав, что я ОЧЕНЬ младший разработчик, и я все еще пытаюсь понять, как использовать API os!

Поэтому я пытаюсь создать страницу, которая позволяет пользователям отбрасывать маркеры на карте, а затем использовать широту и долготу маркера, чтобы получить запрос на API карт google для названия города, на котором был удален маркер, а затем введите название города в панель рядом с картой. НО, у меня проблемы с моим запросом GET, и он возвращает ошибку 400 ошибок в консоли.

Я хочу отобразить список всех городов, на которые были помещены маркеры, и поэтому я пытаюсь использовать интерполяцию в URL-адресе, чтобы его можно было использовать снова и снова для всех широт и долгот, возвращаемых сброшенными контактами. Поэтому я использовал следующий URL https://maps.googleapis.com/maps/api/geocode/json?latlng=${findCityLng},${findCityLng}&sensor=true&key=MY_API_KEY; (В моем коде я ввел свой фактический ключ API, но вынул его для этого сообщения).

Я хочу знать, как исправить URL-адрес, чтобы он все еще можно было использовать на любой лат и долго, без необходимости жестко кодировать их значения, и чтобы потом он возвращал JSON, я могу вникнуть в название города вместо того, чтобы возвращать 400. У меня есть googled и googled, но нет ничего в использовании интерполяции для создания URL-адреса, чтобы сделать запросы API или почему запрос get на карты google api возвратит ошибку 400 при создании запроса на получение. Я уже много часов работаю в Интернете и читаю документы Google Maps API, но не смог найти/понять, что мне нужно.

Любая помощь будет принята с благодарностью.

Вот весь мой код (обратите внимание, что мне пришлось удалить ключ API, и я не думаю, что фрагмент кода будет работать без него, но я не уверен, как еще его публиковать! Извините, если это неправильная вещь):

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="/master.css">
  <link rel="stylesheet" href="/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="/main.js"></script>

</body>

</html>
Теги:
google-maps
get-request
http-status-code-400

2 ответа

0
Лучший ответ

Вы делаете запрос на следующий URL:

'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 поскольку он больше не требуется (источник: документация)
  • Вы можете (но не обязательно) использовать обратный геокод из Javascript API. Под капотом он делает то, что вы делаете, вызывая URL-адрес geocode http, но поскольку вы работаете в среде javascript, код для вас может быть проще.
Поделиться
  • 1
    Спасибо! Я чувствую себя таким идиотом! Я начал с URL целую вечность и не видел этого!
1

В запросе для карт Google у вас есть такая ошибка:

Ошибка JavaScript API Google Maps: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

Здесь вы можете прочитать информацию об этой ошибке

https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

Информация о ссылке выше показывает, что вам нужно создать новый ключ api здесь

И добавьте свой вновь созданный api на свою страницу, как это

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>
Поделиться
  • 0
    Спасибо за ответ. Просто для подтверждения, у меня действительно есть ключ API, и я его использовал (я просто извлек его из кода, который я разместил выше, так как Google теперь взимает плату, если вы просматриваете определенное количество запросов), но вы вы говорите, что мне нужен еще один новый ключ API в дополнение к моему оригинальному ключу, чтобы это работало?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню