JUST HTML / JS和谷歌地图上的实时GPS追踪器可以在手机上运行吗？可能吗？

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.

我已经阅读了GPS实时跟踪，并发现了一些关于它的事情，主要需要PHP，zope和数据库来存储传入的数据。其他一些方法使用ajax与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!

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

1 个解决方案

#1

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

对的，这是可能的。最新智能手机中的大多数浏览器都实现了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.

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

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.

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

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

使用Geolocation API在Google Maps上绘制一个点，看起来像这样：

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:

以上只会收集一次位置，并且在您开始移动时不会自动更新。要处理这个问题，您需要保留对标记的引用，定期调用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();

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.

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

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

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

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

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

#1