在JUST HTML / JS和谷歌地图上的实时GPS跟踪器可以在手机上运行？可能吗？ [英] Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible?

问题描述

我已经阅读了GPS实时跟踪，并发现了几件事情，主要是需要PHP，zope和一个数据库来存储传入的数据。其他一些方法使用与PHP关系的ajax。

关于我的问题，是否有可能只使用html和JS，当您在城市中的任何地方移动时，使用标记或其他任何内容填充Google Map ？需要一些帮助，谢谢！

解决方案

是的，这是可能的。最新智能手机中的大多数浏览器都实现了 W3C Geolocation API ：

Geolocation API定义了一个高层次的位置信息接口，只与主持实施的设备相关联，例如纬度和经度。 API本身不可知底层位置信息源。位置信息的常见来源包括全球定位系统（GPS）和从诸如IP地址，RFID，WiFi和蓝牙MAC地址以及GSM / CDMA小区ID等网络信号以及用户输入推断出的位置。无法保证API返回设备的实际位置。

API旨在启用一次性位置请求和重复位置更新，以及显式查询缓存位置的能力。

使用Geolocation API在Google地图上绘制一个点，如下所示：

  if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（function（position）{
 
 var point = new google .maps.LatLng（position.coords.latitude，
 position.coords.longitude）; 
 
 //初始化Google Maps API v3 
 var map = new google.maps。 Map（document.getElementById（'map'），{
 zoom：15，
 center：point，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 //放置一个记号笔
 new google.maps.Marker（{
 position：point，
 map：map 
}）; 
} ）; 
} 
 else {
 alert（'W3C Geolocation API is not available'）; 
} 
  

以上只会收集一次，并且不会自动更新开始移动。为了处理这个问题，你需要保留对标记的引用，定期调用 getCurrentPosition（）方法，并将标记移动到新坐标。代码可能如下所示：

  //初始化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，
 
 $ b if（marker）{
 //标记已经创建 - 移动它
 marker.setPosition（newPoint）; 
} 
 else {
 //标记不存在 - 创建它
 marker = new google.maps.Marker（{
 position：newPoint，
 map：map 
 $ b））; 
} 
 
 //将地图放置在新位置
 map.setCenter（newPoint）; 
}）; 
 
 //每5秒调用autoUpdate（）函数
 setTimeout（autoUpdate，5000）; 
} 
 
 autoUpdate（）; 
  

现在，如果通过跟踪您的意思是您还应该将此信息存储在服务器上（以便其他人可能会看到你从远程位置移动），那么你必须使用AJAX将点发送到服务器端脚本。

另外，请确保在您参与此类项目之前， Google地图API使用条款允许使用此用法。

---

更新：W3C Geolocation API公开了 watchPosition（） 方法，可以改用我们在上面的例子中使用了 setTimeout（）机制。

I have read up on GPS Real time tracking and found out several things about it, mostly requiring PHP, zope and a database to store the incoming data. Some other methods uses ajax with relations to PHP.

As regards to my question, is it possible to do so with just html and JS, using markers or anything else to populate the Google Map when you move anywhere in the city? Need some help on this, Thanks!

解决方案

Yes, it is possible. Most browsers in the latest smartphones have implemented the W3C Geolocation API:

The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.

The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions.

Using the Geolocation API to plot a point on Google Maps, will look something like this:

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');
} 

The above will only gather the position once, and will not auto update when you start moving. To handle that, you would need to keep a reference to your marker, periodically call the getCurrentPosition() method, and move the marker to the new coordinates. The code might look something like this:

// 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();

Now if by tracking you mean that you should also store this information on a server (so that someone else could see you moving from a remote location), then you'd have to send the points to a server-side script using AJAX.

In addition, make sure that the Google Maps API Terms of Use allow this usage, before you engage in such a project.

---

UPDATE: The W3C Geolocation API exposes a watchPosition() method that can be used instead of the setTimeout() mechanism we used in the above example.

这篇关于在JUST HTML / JS和谷歌地图上的实时GPS跟踪器可以在手机上运行？可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！