Рисование карты Google с данными из API

Автор оригинала: Yitz Schaffer.

Примечание: Карты, показанные в руководстве, – это все скриншоты, чтобы убедиться, что все читают, имеет тот же опыт.

Интеграция динамических отображений, подобных тем, которые из API Google Maps – это элемент хлеба-масла в Интернете. Хотя многие вещи в разработке браузера, он может занять несколько раз, чтобы получить голову вокруг всего, что должно произойти!

В этом руководстве мы собираемся интегрировать данные из двух источников, чтобы нарисовать карту, а поместить маркеры на нее:

• Доступ к расположению пользователя через Навигатор браузера API ( Документация )
• Восстановите близлежащие достопримечательности через API (в нашем случае API Starbucks Starbucks API ) ( API Главная )
• Нарисуйте карту Google окрестности пользователя, используя Google Maps JavaScript API ( Документация )
• Нарисуйте маркеры на карте на обнаруженных местах Starbucks
• Показать название каждого местоположения Starbucks, когда пользователь охватывает его маркер

Обратите внимание, что оба браузера Call и Вызов AJAX на API Starbucks выполняется асинхронно Так что, если вам еще не комфортно с обратными вызовами, проверьте Это введение в асинхронное программирование Отказ

Наш код

После провилегированного максима «сделать его работать, а затем сделать это правильно», мы начнем кодировать встроенный на HTML-странице. Мы можем извлечь JavaScript, мы создаем в свой собственный файл позже. Вот пустая карта Div и элемент скрипта мы начнем с:

Расположение пользователя с навигатором. Гейолокация

Современные браузеры позволяют нам запросить местоположение пользователя, но нам нужно будет обслуживать эту страницу на локальном веб-сервере – это не будет работать, чтобы просмотреть файл напрямую, используя Файл:/// протокол. Всеобъемлющее руководство по этому поводу не имеет возможности, но это, как правило, работает на Unix-подобных системах, в командной строке, когда в каталоге, где ваш файл:

$ python -m SimpleHTTPServer

Вернуться к нашему коду JS – результат геолокации обеспечивается асинхронно через обратный вызов:

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position);
}, function(error) {
  console.log(error);
});

Когда вызов местоположения добится успеха, первый обратный вызов запущен. Если есть ошибка, или пользователь блокирует запрос, выполняется второй обратный вызов. Результат успеха выглядит так:

{
  coords: {
    accuracy: 30,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: 40.8036842,
    longitude: -74.1010033,
    speed: null
  },
  timestamp: 1434464159510
}

Используйте местоположение для извлечения данных из API

Насколько этому написанию, Starbucks имеет Удобный API Для получения местоположений магазина – так что давайте сделаем это!

var positionToStarbucksLatlng = function(position) {
  return position.coords.latitude + ',' + position.coords.longitude;
};

navigator.geolocation.getCurrentPosition(function(position) {
  $.ajax({
    url: 'https://testhost.openapi.starbucks.com/location/v2/stores/nearby',
    headers: {
      'Accept': 'application/json'
    },
    data: {
      radius: 10,
      latlng: positionToStarbucksLatlng(position)
    },
    success: function(storesData) {
      console.log(storesData);
    }
  });
}, function(error) {
  console.log(error);
});

Payload API Starbucks выглядит так:

{
    "paging": {
        "total": 99,
        "offset": 0,
        "limit": 10,
        "returned": 10
    },
    "stores": [
        {
            "distance": 0.2879,
            "store": {
                "id": "18315",
                "name": "QFC-Bellevue #874 (Bel-East)",
                ...
                "address": {
                  ...
                },
                "coordinates": {
                    "latitude": 47.596722,
                    "longitude": -122.148774
                },
                ... etc...

Нарисуйте пустую карту

Чтобы создать нашу карту, сосредоточенную вокруг позиции пользователя, сначала нам нужно будет преобразовать позиция Объект на тот, который использует API Google Maps API, а именно Google.maps.latlng.

var positionToGoogleLatLng = function(position) {
  return new google.maps.LatLng(
    position.coords.latitude,
    position.coords.longitude
  );
};

Теперь создание карты Google сосредоточена вокруг этого места:

var drawStoresMap = function(position) {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: positionToGoogleLatLng(position),
    zoom: 12
  });
};

Примечание: Я начал с произвольным уровнем масштабирования, который будет работать в регионе, как Северный Нью-Джерси, где вокруг много звездных плавок. Если у вашего региона нет много, используйте нижний уровень зума. В реальном приложении мы проинструктировали карту растянутому или контракту на основе плотности ближайших мест Starbucks, но это за пределами объема этого учебника.

Теперь мы можем добавить звонок к этой функции для нашего Навигатор Перезвоните:

navigator.geolocation.getCurrentPosition(function(position) {
   $.ajax({
   // ...
    success: function(storesData) {
      drawStoresMap(position);
    }
  })
});

Рисовать маркеры на карте в магазине

Наконец, мы зацикливаем данные, возвращаемые API Starbucks, чтобы добавить маркеры на карту. Преобразование каждого магазина в Google Latlng:

var storeToGoogleLatLng = function(store) {
  return new google.maps.LatLng(
    store.store.coordinates.latitude,
    store.store.coordinates.longitude
  );
};

… и создать маркер для каждого магазина, с именем магазина как Название Атрибут для наведения:

var drawMarker = function(map, store) {
  var marker = new google.maps.Marker({
    map: map,
    position: storeToGoogleLatLng(store),
    title: store.store.name
  });
};

Мы добавляем это на функцию рисования карты и петли через магазины:

var drawStoresMap = function(position, storesData) {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: positionToGoogleLatLng(position),
    zoom: 12
  });

  for (var i = 0; i < storesData.stores.length; i++) {
    drawMarker(map, storesData.stores[i]);
  }
};

Воила!

Вы можете увидеть всю страницу В этом весте Отказ