仅在授予权限后如何加载地图

Question

我正在开发一个分类门户网站，用户可以发布他们的广告，我使用 Google 地理定位功能从浏览器中获取用户的当前位置坐标。

浏览器要求授予权限，但我只想在仅授予权限的情况下显示地图。如果不是，我必须为该位置设置一些默认坐标。

这是我当前的代码：

  <div id="map"></div>
    <script>
      // 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.
      var map, infoWindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 13
        });
        infoWindow = new google.maps.InfoWindow;
            document.cookie = "myJavascriptVar=12345";


        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var my_marker = new google.maps.Marker({
                       position: pos,
                       map: map,
                       "icon": 'map.png',
                       draggable: true,
                   });

            infoWindow.setPosition(pos);
            //infoWindow.setContent('You are here');
            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);
      }

如何检查浏览器权限是否被授予？

为什么每次我刷新页面都会询问？

Answer 1

不清楚您是否要显示地图，因此我将向您展示如何执行其中任何一项的代码示例。

A) 如果您想在向用户请求位置权限时首先在默认坐标处显示地图，如果用户阻止权限，则保留默认地图。

var map, infoWindow;
var defaultPos = { lat: -34.397, lng: 150.644 };

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: defaultPos,
    zoom: 13
  });
  infoWindow = new google.maps.InfoWindow;
  document.cookie = "myJavascriptVar=12345";

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

      var my_marker = new google.maps.Marker({
        position: pos,
        map: map,
        draggable: true,
      });

      infoWindow.setPosition(pos);
      infoWindow.setContent('You are here');
      infoWindow.open(map, my_marker);
      map.setCenter(pos);
    }, function() {
      // user didn't grant permission so keep using default coordinates
    });
  }
}

B) 如果您不想在向用户请求位置权限时首先显示地图，然后在用户阻止权限时显示具有默认坐标的地图。

var map, infoWindow;
var defaultPos = { lat: -34.397, lng: 150.644 };

function initMap() {

  infoWindow = new google.maps.InfoWindow;
  document.cookie = "myJavascriptVar=12345";

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

      map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 13
      });

      var my_marker = new google.maps.Marker({
        position: pos,
        map: map,
        draggable: true,
      });

      infoWindow.setPosition(pos);
      infoWindow.setContent('You are here');
      infoWindow.open(map, my_marker);
    }, function() {
      // user didn't grant permission so display a map with default coordinates
      map = new google.maps.Map(document.getElementById('map'), {
        center: defaultPos,
        zoom: 13
      });
    });
  }
}

C) 如果您只想在用户授予位置权限的情况下显示带有用户位置的地图，而没有任何默认坐标回退。

var map, infoWindow;

function initMap() {

  infoWindow = new google.maps.InfoWindow;
  document.cookie = "myJavascriptVar=12345";

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

      map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 13
      });

      var my_marker = new google.maps.Marker({
        position: pos,
        map: map,
        draggable: true,
      });

      infoWindow.setPosition(pos);
      infoWindow.setContent('You are here');
      infoWindow.open(map, my_marker);
    }, function() {
      // user didn't grant permission so display nothing
    });
  }
}

希望这会有所帮助！