Как получить результат API в формате JSON и нанести его на карту

У меня есть рабочий пример того, как консоли логировать данные JSON, которые я получаю из внешнего API. У меня также есть рабочий пример того, как отображать данные геокодирования в качестве маркера на карте Google. Я попытался объединить их в приведенном ниже примере кода (это довольно плохо).

Чего я не могу сделать, так это заставить оба работать вместе, т.е. вызвать API и передать данные геокодирования для нанесения на карту. Вот пример моего кода для вызова API, загрузки карты Google и регистрации в консоли данных геокодирования (я удалил ключ Google [поэтому, пожалуйста, вставьте свой собственный для проверки], но оставил ключ RapidAPI):

<!DOCTYPE html>
<html lang = "en" dir = "ltr">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=\, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge"  />
  <title>Javascript Calling APIs</title>
  <script src = "https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src = "https://maps.googleapis.com/maps/api/js?key=ENTER_GOOGLE_KEY_HERE&callback=initMap&libraries=&v=weekly" defer></script>
  <style type = "text/css">
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <h1>Test</h1>
  <div id = "map"></div>
  <p id = "demo"></p>

  <input type = "text" placeholder = "Type something..." id = "myInput">
  <button type = "button" onclick = "getInputValue();">Get Value</button>


  <script>
  function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
}

var myHeaders = new Headers();
myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  async function getTown() {
    const response = await fetch(api_url + '/' + town, requestOptions);
    const data = await response.json();
    console.info(data);
    let la = data[2].Geocode_Latitude;
    let lo = data[2].Geocode_Longitude;
    let pot = {lat: la, lng: lo};
        console.info(pot);
  }

  getTown();

      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: 53.4808,
            lng: -2.2426
          },
          zoom: 7,
        });

  addMarker(pot);

  //add marker function
  function addMarker(coords){
    var marker = new google.maps.Marker({
    position:coords,
    map:map,
    icon:'pin.png'
    });
  }
  };

Как бы я нанес результаты поиска города на карту? Взяв широту/долготу из возврата API и нанеся их в качестве маркеров. Вот пример ответа JSON:

AddressLine2: "Hallgate Lane"
AddressLine3: "Stalmine"
BusinessName: "MCCOLLS"
Geocode_Latitude: 53.901518
Geocode_Longitude: -2.953877
PostCode: "FY6 0LA"
RatingValue: 5
_id: "5fc96b3a9c728ca91c564485"

Что map? Хочешь google.maps.Marker? Пример Google для добавления маркера на карту , хотя связанный с этим вопрос: Google Maps JS API v3 — простой пример с несколькими маркерами может помочь вам в этом.

— 11.12.2020 01:43

Да карта гугл. Я могу нанести маркеры на карту Google. Я просто не могу нанести широту/долготу из API на карту. Я могу console.info указать широту/долготу для API, но я не могу передать результат широты/долготы из API функции, которая будет отображать маркер

— 11.12.2020 02:19

Можете ли вы предоставить образец формата JSON, возвращаемый службой (это могут быть тестовые данные)? А ваш код для создания карты? Предпочтительно так, как вы пытаетесь отобразить маркеры (т. е. минимально воспроизводимый пример, демонстрирующий проблему). Код, который у вас сейчас есть в вашем вопросе, показывает, как запрашивать API, но не работает, поскольку ключ недействителен и не отображает карту.

— 11.12.2020 04:14

Привет, я добавил свой код, который показывает мою попытку объединить вызов API с графиком карты Google. Это довольно плохо, и я борюсь с тем, как преодолеть локальную область действия функции с глобальной областью действия (поскольку я новичок в этом). Я также опубликую тестовые возвращаемые данные JSON.

— 11.12.2020 19:09

javascript api google-maps

11.12.2020 00:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

755

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы поставить маркер на вашей карте на основе ответа от API, добавьте этот код в обработку ответа:

let pot = { // existing code
  lat: la,
  lng: lo
};
let marker = new google.maps.Marker({
  position: pot,
  map: map
})

Однако вам также нужно будет изменить свой код, чтобы сделать запрос при запуске функции getInputValue (в настоящее время она запускается до создания карты с начальным значением поля <input> (которое в опубликованном коде пусто).

Что-то вроде этого:

function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  function getTown() {
    const response = await fetch(api_url + '/' + town, requestOptions);
    const data = await response.json();
    console.info(data);
    let la = data[0].Geocode_Latitude;
    let lo = data[0].Geocode_Longitude;
    let pot = {
      lat: la,
      lng: lo
    };
    let marker = new google.maps.Marker({
      position: pot,
      map: map
    })
    console.info(pot);
  }

  getTown();

}

доказательство концепции скрипки

фрагмент кода:

function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  function getTown() {
    // use provided response instead of response from server
    //  const response = await fetch(api_url + '/' + town, requestOptions);
    //  const data = await response.json();
    const data = [{
      AddressLine2: "Hallgate Lane",
      AddressLine3: "Stalmine",
      BusinessName: "MCCOLLS",
      Geocode_Latitude: 53.901518,
      Geocode_Longitude: -2.953877,
      PostCode: "FY6 0LA",
      RatingValue: 5,
      _id: "5fc96b3a9c728ca91c564485",
    }];
    console.info(data);
    let la = data[0].Geocode_Latitude;
    let lo = data[0].Geocode_Longitude;
    let pot = {
      lat: la,
      lng: lo
    };
    let marker = new google.maps.Marker({
      position: pot,
      map: map
    })
    console.info(pot);
  }

  getTown();

}


let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 53.4808,
      lng: -2.2426
    },
    zoom: 7,
  });

  addMarker(pot);

  //add marker function
  function addMarker(coords) {
    var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon: 'pin.png'
    });
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 60%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Markers</title>
    <script src = "https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
      <h1>Test</h1>
  <div id = "map"></div>
  <p id = "demo"></p>

  <input type = "text" placeholder = "Type something..." id = "myInput">
  <button type = "button" onclick = "getInputValue();">Get Value</button>
  </body>
</html>

11.12.2020 21:56

Другие вопросы по теме

Как получить токен keycloak?

Проблема с [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Необработанное исключение: тип «String» не является подтипом типа «int» из «index»

Ошибка при удалении файла, используемого с python

Интеграция с Microsoft Teams с помощью API

RESTful API HATEOAS

Показать данные YouTube пользователя, такие как понравившиеся видео и подписки пользователя, в приложении для Android

Есть ли способ создать подписку на любой или несколько типов событий с помощью Azure DevOps Rest API?

Проблема буферной печати чеков Epson

Как преобразовать данные JSON в данные формата XML и загрузить файл в React JS

Необязательный параметр вместе с обязательным параметром в маршрутах приложения фляги

Как получить результат API в формате JSON и нанести его на карту

Ответы 1

Другие вопросы по теме

Похожие вопросы