Javascript JUST HTML / JS 和 Google Maps 上的实时 GPS 追踪器可以在手机上运行吗？是否可以？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3305225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible?
提问by cheesebunz
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 和一个数据库来存储传入的数据。其他一些方法使用与 PHP 相关的 ajax。
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 地图？需要一些帮助，谢谢！
回答by Daniel Vassallo
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.
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 为仅与承载实现的设备相关联的位置信息（例如纬度和经度）定义了一个高级接口。API 本身与底层位置信息源无关。位置信息的常见来源包括全球定位系统 (GPS) 和从网络信号（如 IP 地址、RFID、WiFi 和蓝牙 MAC 地址、GSM/CDMA 小区 ID）以及用户输入推断出的位置。不保证 API 会返回设备的实际位置。
该 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 Useallow 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()我们在上面示例中使用的机制。
