从web浏览器获取GPS位置

I am developing a mobile based web-site, there I have integrated Google Maps, I need to fill the 'From' field of Google Maps dynamically.

我正在开发一个移动网站，在那里我集成了谷歌地图，我需要动态填充谷歌地图的“From”字段。

Is it possible to get the GPS location from web browser and fill it up in the 'From' field of a Google Map dynamically?

是否有可能从web浏览器获取GPS位置并将其动态填充到谷歌地图的“from”字段中?

7 个解决方案

#1

If you use the Geolocation API, it would be as simple as using the following code.

如果您使用地理定位API，它将与使用以下代码一样简单。

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

You may also be able to use Google's Client Location API.

您也可以使用谷歌的客户端定位API。

This issue has been discussed in Is it possible to detect a mobile browser's GPS location? and Get position data from mobile browser. You can find more information there.

这个问题已经在手机浏览器的GPS定位中讨论过了吗?并从移动浏览器获取位置数据。你可以在那里找到更多的信息。

#2

See the discussion How to get GPS coordinates in the browser

查看如何在浏览器中获取GPS坐标的讨论

There you have the link to example application Where Am I? that works on mobile devices. I've tested it on my Android and it started GPS module to get current coordinates. You can analyze the source on the living example.

这里有链接到示例应用程序I在哪?这适用于移动设备。我在我的安卓系统上测试过，它启动了GPS模块来获取当前坐标。您可以在活的示例上分析源。

I've made QR code for quick access from mobile:

我已经做了二维码快速访问手机:

#3

To give a bit more specific answer. HTML5 allows you to get the geo coordinates, and it does a pretty decent job. Overall the browser support for geolocation is pretty good, all major browsers except ie7 and ie8 (and opera mini). IE9 does the job but is the worst performer. Checkout caniuse.com:

给出一个更具体的答案。HTML5允许你获得地理坐标，而且它做得相当不错。总的来说，对地理定位的浏览器支持是相当不错的，除了ie7和ie8(以及opera mini)之外的所有主要浏览器。IE9做了这项工作，但表现最差。结帐caniuse.com

http://caniuse.com/#search=geol

http://caniuse.com/搜索=青烟

Also you need the approval of your user to access their location, so make sure you check for this and give some decent instructions in case it's turned off. Especially for Iphone turning permissions on for Safari is a bit cumbersome.

你还需要得到用户的许可才能访问他们的位置，所以一定要检查一下，并给出一些适当的说明，以防它被关闭。

#4

Use this, and you will find all informations at http://www.w3schools.com/html/html5_geolocation.asp

使用这个，您将在http://www.w3schools.com/html/html5_geoloc.asp上找到所有的信息

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>

#5

There is the GeoLocation API, but browser support is rather thin on the ground at present. Most sites that care about such things use a GeoIP database (with the usual provisos about the inaccuracy of such a system). You could also look at third party services requiring user cooperation such as FireEagle.

有地理定位API，但是目前对浏览器的支持还很薄弱。大多数关心这类事情的网站都使用GeoIP数据库(通常附带关于这样一个系统的不准确性的附加条款)。您还可以查看需要用户合作的第三方服务，如FireEagle。

#6

Let's use the latest fat arrow functions:

让我们使用最新的fat arrow函数:

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})

#7

Observable

可观测的

/*
  function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  }

  function geo_error() {
    alert("Sorry, no position available.");
  }

  var geo_options = {
    enableHighAccuracy: true,
    maximumAge        : 30000,
    timeout           : 27000
  };

  var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }