通过 Geolocation 和 Javascript API 登录网站的用户的位置，但违规错误

Posted 2023-02-23

【中文标题】通过 Geolocation 和 Javascript API 登录网站的用户的位置，但违规错误

【英文标题】：Location of the users logging in to the website via Geolocation and Javascript API, but violation errors

【发布时间】：2020-04-08 04:30:12

【问题描述】：

尝试使用 Google 的 Geolocation 和 javascript API 访问登录网站的用户的位置。但它给了我违规错误。

html 文件

<script>    
  var map, infoWindow;
      function initMap() 
        map = new google.maps.Map(document.getElementById('map'), 
          center: lat: -34.397, lng: 150.644,
          zoom: 6
        );
        infoWindow = new google.maps.InfoWindow;
    // 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.');
        infoWindow.open(map);
        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.');
        infoWindow.open(map);
      
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
    </script>

EXPRESSJS

const express=require('express');
const path = require('path');
const app=express();
app.get('/*', (req, res) => 
res.sendFile(path.join(__dirname, './geo.html'));
)
const port =8081;
app.listen(port,()=>
console.log(`App running on $port`);
)

网页询问我的位置，然后抛出以下违规警告：

[Violation] Only request geolocation information in response to a user gesture.
initMap @ geo.html:20
(anonymous) @ js?key=AIzaSyCZoELufy8fp9Vg4jGAAwAtDz0f8UJuxzc&callback=initMap:142
(anonymous) @ js?key=AIzaSyCZoELufy8fp9Vg4jGAAwAtDz0f8UJuxzc&callback=initMap:142
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ util.js:45
Nz @ util.js:45
_.zE @ util.js:134
LW @ onion.js:30
(anonymous) @ onion.js:35
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

你能帮我解决这个问题吗

【参考方案1】：

谷歌有一个recommendation that you don't ask for the users location on page load：

用户对在页面加载时自动请求其位置的页面不信任或感到困惑。与其在页面加载时自动请求用户的位置，不如将请求与用户的手势联系起来，例如点击“查找我附近的商店”按钮。确保手势清晰明确地表达了对用户位置的需求。

您应该添加一个按钮，向用户提供一些信息，说明您首先需要该位置的原因，然后再询问。这样用户就知道你为什么需要它。

【讨论】：

嗨，我收到关于是否允许位置共享的警报，即使在单击允许之后也是如此。我没有得到任何位置信息。

您应该制作一个请求位置 onclick 的按钮，该按钮附近有文字描述您需要该位置的原因。