谷歌地图地理位置 getcurrentposition()答案

【问题标题】：Google Map geolocation getcurrentposition()谷歌地图地理位置 getcurrentposition()
【发布时间】：2017-01-03 22:09:48
【问题描述】：

我正在使用 google geolocation 的 getCurrentPosition() 函数来获取用户的当前位置。

它在 Firefox 上对我来说很好，但在 chrome 上却不行。

我的代码如下::

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showtemp);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&key=AIzaSyDOgvRydLLNrztjgagobYS_sROK1u3r4M4&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
function showtemp(temp) { 
    alert("test");
    }

function showError(error) {  

    $.get("http://ipinfo.io", function (response) {
        var array = (response.loc).split(',');
        console.log(array[0]);
        var latlon = array[0] + "," + array[1];
        var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
         +latlon+"&zoom=14&size=400x300&sensor=false";
            document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
     }, "jsonp");
} 
</script>

</body>
</html>

请帮我解决这个问题。

它给了我错误 ::“ getCurrentPosition() 和 watchPosition() 在不安全的来源上被弃用，并且支持将在未来被删除。您应该考虑将您的应用程序切换到安全的来源，例如 HTTPS。”

提前致谢

【问题讨论】：

它在 chrome 中不起作用，而不是在控制台中显示错误。用 chrome 的控制台错误更新你的问题？？
getcurrentposition() 已被弃用，并且没有替代它。阅读这个答案：- getcurrentposition-and-watchposition-are-deprecated-on-insecure-origins
那么有什么办法可以使用最新的 chrome Version = 52 吗？
注意：I am using the google geolocation's getCurrentPosition() function - 这与谷歌无关 - 这是一个浏览器功能

标签： javascript php geolocation

【解决方案1】：

getcurrentposition() 已被弃用，并且没有替代它。阅读这个答案：- getcurrentposition-and-watchposition-are-deprecated-on-insec‌ure-origins

点击这个谷歌更新的 api 的示例链接，它是工作示例。：https://developers.google.com/maps/documentation/javascript/examples/map-geolocation。

悬停在代码块右上角复制代码或在JSFiddle中打开。

使用此功能：

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.

<script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 6
      });
      var infoWindow = new google.maps.InfoWindow({map: map});

      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent('Location found.');
          map.setCenter(pos);
        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });
      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
      }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
    }

</script>

【讨论】：

on this jsfiddle link it's a updated api's working example - 它是空白的 - 失败
感谢您的指点 :) 我更新了我的答案 jsfiddle 链接是谷歌的工作示例，所以当我们在这里使用它时它可能是空白的。所以我用工作示例的链接更新了我的问题。

【解决方案2】：

地理位置本身并没有被弃用，但仅限于通过 HTTPS 提供服务的网站。

警告本身显示“getCurrentPosition() 和 watchPosition() 已被弃用在不安全的来源上”，这归结为通过 HTTP 而不是 HTTPS 提供的页面。

看，您的代码在最新的 Chrome 中运行良好 here。

获得 SSL 的最简单方法可能是使用 Github pages 来托管您的内容或使用 surge。

【讨论】：

【解决方案3】：

您可以使用https://ipinfo.io API（这是我的服务）来替代getCurrentLocation()。每天最多 1,000 个请求是免费的（有或没有 SSL 支持）。它为您提供坐标、名称等，适用于非 SSL 站点，并且不会提示用户许可。这是一个例子：

curl ipinfo.io
{
  "ip": "172.56.39.47",
  "hostname": "No Hostname",
  "city": "Oakland",
  "region": "California",
  "country": "US",
  "loc": "37.7350,-122.2088",
  "org": "AS21928 T-Mobile USA, Inc.",
  "postal": "94621"
}

这是一个示例，它使用与您从getCurrentPosition() 获得的内容相匹配的 API 响应构造一个 coords 对象：

$.getJSON('https://ipinfo.io/geo', function(response) { 
    var loc = response.loc.split(',');
    var coords = {
        latitude: loc[0],
        longitude: loc[1]
    };
});

这里有一个详细的示例，展示了如何将其用作getCurrentPosition() 的后备：

function do_something(coords) {
    // Do something with the coords here
}

navigator.geolocation.getCurrentPosition(function(position) { 
    do_something(position.coords);
    },
    function(failure) {
        $.getJSON('https://ipinfo.io/geo', function(response) { 
        var loc = response.loc.split(',');
        var coords = {
            latitude: loc[0],
            longitude: loc[1]
        };
        do_something(coords);
        });  
    };
});

有关详细信息，请参阅http://ipinfo.io/developers/replacing-navigator-geolocation-getcurrentposition。

【讨论】：