只有 HTML/JS 和谷歌地图上的实时 GPS 追踪器可以在手机上运行?是否可以?

2022-01-22 00:00:00 google-maps gps javascript html tracking

我阅读了 GPS 实时跟踪并发现了一些关于它的内容，主要是需要 PHP、zope 和一个数据库来存储传入的数据.其他一些方法使用与 PHP 相关的 ajax.

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.

关于我的问题，当您在城市的任何地方移动时，是否可以仅使用 html 和 JS、使用标记或其他任何东西来填充 Google 地图?在这方面需要一些帮助，谢谢！

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!

推荐答案

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

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

Geolocation API 为位置信息定义了一个高级接口，该接口仅与托管实施的设备相关联，例如纬度和经度.API 本身与底层位置信息源无关.位置信息的常见来源包括全球定位系统 (GPS) 和从网络信号(如 IP 地址、RFID、WiFi 和蓝牙 MAC 地址、GSM/CDMA 小区 ID)以及用户输入推断的位置.不保证 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.

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.

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

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

以上只会收集一次位置，当你开始移动时不会自动更新.要处理这个问题，您需要保留对标记的引用，定期调用 getCurrentPosition() 方法，并将标记移动到新坐标.代码可能如下所示:

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

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

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.

此外，请确保 Google Maps API 使用条款允许这种用法，在你从事这样的项目之前.

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

更新: W3C 地理定位 API 公开了一个 watchPosition() 方法可以用来代替我们在上面示例中使用的 setTimeout() 机制.

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

相关文章