javascript - 仅 HTML/JS 和谷歌地图上的实时 GPS 跟踪器可以在手机上运行?可能吗?

标签 javascript html google-maps gps tracking

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

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

最佳答案

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

使用 Geolocation API 在 Google map 上绘制一个点,看起来像这样:

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。

此外,请确保 Google Maps API Terms of Use在您参与此类项目之前,请允许这种用法。


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

关于javascript - 仅 HTML/JS 和谷歌地图上的实时 GPS 跟踪器可以在手机上运行?可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3305225/

相关文章:

javascript - 如何处理 Knockout ViewModel 中的空对象和满对象

javascript - 同一域上的访问控制允许来源问题

javascript - 如何在加载时切换图像

javascript - 将 <li> 元素绑定(bind)到按 id 停靠的元素

javascript - 谷歌地图在 Ionic 2 应用程序中不起作用

javascript - 仅在屏幕调整大小的特定值之后调用函数

javascript - 检查给定的数字是否快乐

php - 如何从字符串中删除段落标记?

android - 应用程序崩溃 "back"映射 fragment

Android - 从 firebase 数据库中删除 "active"标记