如何使用 Gmap 在浏览器地理定位中处理用户批准？

Posted 2023-02-23

【中文标题】如何使用 Gmap 在浏览器地理定位中处理用户批准？

【英文标题】：How to handle user approval in browser geolocation with Gmap?

【发布时间】：2013-07-11 18:06:45

【问题描述】：

我正在与 Gmaps 一起构建 html5 地理定位功能。

我在等待用户批准进行地理定位时遇到了一个小问题：浏览器询问用户是否要进行地理定位。当他单击“是”时，他已被定位，但未触发 gmap 并且地图未显示在屏幕上。然后，如果他刷新它，一切正常。这特别发生在手机上。

我在处理地理定位的事情时给出一段代码：

    <script>
    // <!-- GOOGLE MAPS & POSITION -->

    var radius = 1;
    var map;
    var position;

    jQuery(window).ready(function() 
        //If we click on Find me Lakes
        jQuery("#btnInit").click(initiate_geolocation);
        initiate_geolocation();

        $('#radius').change(function(v)
            handle_geolocation_query(position);
        );
    );

    function initiate_geolocation()  
        if (navigator.geolocation)  
          
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&sensor=true&callback=initialize";
            document.body.appendChild(script);
            navigator.geolocation.getCurrentPosition(append_google_map, handle_errors);
          
        else  
          
            yqlgeo.get('visitor', normalize_yql_response);
          
    

    function handle_errors(error)  
      
        switch(error.code)  
          
            case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
            break;  
            case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
            break;  
            case error.TIMEOUT: alert("retrieving position timedout");  
            break;  
            default: alert("unknown error");  
            break;  
          
      

    function append_google_map(pos) 

        position = pos;

        var mapOptions = 
            zoom: 15,
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            streetViewControl: false,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        

        if (typeof map == 'undefined')  //We make sure the map object hasn't been toogled to the page

            map = new google.maps.Map(document.getElementById("gmap"), mapOptions);

            //$('#gmap').slideToggle('slow');

            setMarkerPosition(position.coords.latitude, position.coords.longitude);

        

        handle_geolocation_query();
    

正如您在此处看到的，我正在使用错误回调和成功回调在启动函数中启动地理定位内容。那时用户屏幕上会出现一个弹出窗口，询问他是否批准地理位置。即使他点击是，似乎代码的某些部分没有被触发（或者我们被重定向到 handle_errors 不知道），因此，地图不会出现在屏幕上（它在代码中的处理得更进一步append_google_map。

谁能帮我弄清楚为什么会发生这种情况以及如何处理？

非常感谢

【参考方案1】：

您不能，这是一项安全功能。您的代码必须等待用户批准或拒绝他们是否要分享他们的位置。

您的代码必须能够对用户的两种响应做出反应。如果他们选择不分享您的代码，您可以尝试回退到城市的坐标，或显示一些消息。

只要您向他们解释为什么他们与您分享他们的位置，可以在页面上显示一条消息告诉他们分享他们的位置。

【讨论】：

嘿，谢谢 Samer，但我已经理解并实现了那部分，看看我的代码。我的问题更像是脚本在用户接受地理定位后无法成功触发。我认为当用户接受地理定位时，navigator.geolocation.getCurrentPosition(append_google_map, handle_errors); 不会调用“append_google_map”。一旦他点击okay，geolocate me，然后什么都没有发生。为什么 ？调用成功函数是处理它的正确方法吗？谢谢

可能是因为尚未加载 Google 地图库。如果您在 URL 中看到加载库，最后您有一个 callback=initialize，因此请尝试在您的 JS 中创建一个名为 initialize 的函数，并确保它可以通过全局范围或 window.initialize = function... 访问，并将您的地理位置放在其中.这就是我通常的做法。