GPS-трекер в режиме реального времени на JUST HTML / JS и Google Maps будет работать на мобильном телефоне?Является ли это возможным? - PullRequest
Новая
       22

GPS-трекер в режиме реального времени на JUST HTML / JS и Google Maps будет работать на мобильном телефоне?Является ли это возможным?

29 голосов
/ 22 июля 2010

Я прочитал об GPS-слежении в режиме реального времени и узнал о нем несколько вещей, в основном требующих PHP, zope и базы данных для хранения входящих данных.Некоторые другие методы используют ajax с отношениями к PHP.

Что касается моего вопроса, возможно ли это сделать, используя только html и JS, используя маркеры или что-либо еще для заполнения карты Google, когда вы перемещаетесь в любую точку города?Нужна помощь в этом, спасибо!

1 Ответ

44 голосов
/ 22 июля 2010

Да, это возможно. Большинство браузеров в последних смартфонах реализовали W3C Geolocation API :

Geolocation API определяет высокоуровневый интерфейс для информации о местоположении, связанной только с устройством, на котором размещена реализация, например широта и долгота. Сам API не зависит от базовых источников информации о местоположении. Общие источники информации о местоположении включают в себя Глобальную систему определения местоположения (GPS) и местоположение, выведенное из сетевых сигналов, таких как IP-адрес, RFID, MAC-адреса WiFi и Bluetooth, а также идентификаторы сот GSM / CDMA, а также пользовательский ввод. Нет никаких гарантий, что API возвращает фактическое местоположение устройства.

API разработан для обеспечения как однократных запросов позиции, так и повторных обновлений позиций, а также возможности явного запроса кешированных позиций.

Использование API геолокации для построения точки на Картах Google будет выглядеть примерно так: 

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(function(position) {  

    var point = new google.maps.LatLng(position.coords.latitude, 
                                       position.coords.longitude);

    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }); 
} 
else {
  alert('W3C Geolocation API is not available');
}

Вышеуказанное будет собирать позицию только один раз и не будет автоматически обновляться при начале движения. Чтобы справиться с этим, вам потребуется сохранить ссылку на маркер, периодически вызывать метод getCurrentPosition() и перемещать маркер к новым координатам. Код может выглядеть примерно так: 

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = null;

function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);
}

autoUpdate();

Теперь, если отслеживая, вы имеете в виду, что вы также должны хранить эту информацию на сервере (чтобы кто-то еще мог видеть ваше перемещение из удаленного местоположения), тогда вам придется отправлять точки в сценарий на стороне сервера, используя AJAX.

Кроме того, убедитесь, что Условия использования API Карт Google разрешают такое использование, прежде чем приступать к такому проекту.

ОБНОВЛЕНИЕ: API геолокации W3C предоставляет метод watchPosition(), который можно использовать вместо механизма setTimeout(), который мы использовали в приведенном выше примере.

...