javascript - geolocation.getCurrentPosition 晚上失败 -- 如何提供自己的 api key ?

标签 javascript ruby-on-rails google-chrome firefox geolocation

这是一个很长的问题,答案可能很短。

在我的 Rails 5 应用程序中,我使用地理定位 API 的这个相当基本的 JS 实现从浏览器获取用户位置:


更新:这是使用 geocomplete 插件 ( https://ubilabs.github.io/geocomplete/ ) 的整个脚本:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAPS_API_KEY']%>&language=<%=I18n.locale%>&libraries=places"></script>

<script>
  $(function(){
    var geolocation = null;
    var lati  = null;
    var longi = null;

    //start by drawing a default map
    nogeoloc(); 
    function nogeoloc() {
      geo(lati,longi);
      console.log("no geolocation");
    }

    // check for geolocation support
    if (window.navigator && window.navigator.geolocation) {
      geolocation = window.navigator.geolocation;
    }
    if (geolocation) {
      geolocation.getCurrentPosition(success, error, positionOptions);
    }
    var positionOptions = {
      enableHighAccuracy: true,
      timeout: 10 * 1000, // 10 seconds
    };
    //in case of user permission, center the map at user' location
    function success(position) {
      lati  = position.coords.latitude;
      longi = position.coords.longitude;
      geo(lati,longi);
      console.log("geo data obtained");
    }
    // if denied permission or error, do nothing
    function error(positionError) {
      console.log("error");
      console.log(positionError);
    }

    // map drawing using the geocomplete library
    function geo(lati,longi){
      var myloc = false;
      if(lati && longi) {
        myloc = [lati, longi];
      }
      var options = {
        map: ".map_canvas",
        mapOptions: {
          scrollwheel: true
        },
        location: myloc ,
        details: "form",
        detailsAttribute: "geocompname",
        markerOptions: {
          draggable: true
        }
      };
      $("#geocomplete").geocomplete(options);
      var geocoder = new google.maps.Geocoder();
      var map = $("#geocomplete").geocomplete("map");
      var marker = $("#geocomplete").geocomplete("marker");

      if(lati && longi) {
        map.panTo({ lat: lati, lng: longi});
        marker.setPosition({ lat: lati, lng: longi});
        $("input[geocompname=lat]").val(lati);
        $("input[geocompname=lng]").val(longi);  
        geocoder.geocode({'location': {lat: lati, lng: longi}}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
              $("input[geocompname=formatted_address]").val(results[0].formatted_address);
            }
          }
        });
      }
      $("#geocomplete").bind("geocode:dragged", function(event, latLng){
        $("input[geocompname=lat]").val(latLng.lat());
        $("input[geocompname=lng]").val(latLng.lng());
        map.panTo(latLng);
        geocoder.geocode({'latLng': latLng }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
              $("input[geocompname=formatted_address]").val(results[0].formatted_address);
            }
          }
        });
      });
    }
  });
</script>

这个有些有趣的问题是这个实现在白天工作正常(我在德国)但在晚上在 Firefox 和 Chrome 中返回一个错误:)。

Firefox 中返回的错误代码是:{ code: 2, message: "Unknown error acquiring position"},Chrome 打印更多信息:message: "Network location provider at 'https ://www.googleapis.com/':返回错误代码 403。”

谷歌搜索,原来 403 意味着已达到提供的 api key 的使用限制。这解释了为什么我的代码在白天工作而在晚上开始失败:​​)。

为了对此进行测试,我打开了 firefox 配置并将我自己的 google api key 插入到 geo.wifi.uri 中,结果它起作用了。

现在我的问题:

1)这个问题出现在google自家的浏览器(Chrome)上,连Mozilla的live example都失败了(https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation),能否指望google/mozilla等通过提高请求限制尽快解决这个问题?

2) 请求通过站点访问者的浏览器发送。有没有办法将我自己的谷歌 key 传递给地理定位 api,以便浏览器在请求中使用它而不是默认 key ?

3) 上面的代码在我的 Samsung s6 手机上的 chrome 浏览器中运行良好,但是在使用 Samsung Internet 浏览器的同一部手机上却无法运行。有什么提示这里出了什么问题吗?

最佳答案

您是否尝试过 geolocation.watchPosition 以防它起作用?

关于javascript - geolocation.getCurrentPosition 晚上失败 -- 如何提供自己的 api key ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43771001/

相关文章:

javascript - 无法通过 API 调用发送 Firebase QueryDocumentSnapshot

javascript - Facebook 点赞按钮未显示

javascript - Chrome 扩展 CORB : How to react to updates in the shared DOM

javascript - 如何找到图像元素的xpath

css - 位置 :sticky ignoring right value in chrome

javascript - 渲染由路由器附加的组件中的项目列表

javascript - Vue.js 中的国际化使用 vue-i18n 从 API 服务器获取 JSON 对象

ruby-on-rails - 由 find_or_create_by_ 创建的重复记录

ruby-on-rails - 单个自定义终端命令打开多个窗口,里面有不同的东西

用于基于网络的人工智能的 Python 或 Ruby?