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

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

浏览器请求授予权限，但我只想在授予权限的情况下显示地图。如果没有，我必须为这个位置设置一些默认坐标

这是我目前的代码：

  <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);
      }

//注意：此示例要求您在以下情况下同意位置共享：
//由浏览器提示。如果您看到错误“地理定位服务”
//失败。“，这意味着您可能没有授予浏览器访问的权限
//找到你。
var映射，信息窗口；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：13
});
infoWindow=新建google.maps.infoWindow；
document.cookie=“myJavascriptVar=12345”；
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
var my_marker=new google.maps.marker({
职位:pos,，
地图：地图，
“图标”：“map.png”，
真的，
});
信息窗口。设置位置（pos）；
//infoWindow.setContent（“你在这里”）；
打开（地图）；
地图设置中心（pos）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，infoWindow，map.getCenter（））；
}
}
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
信息窗口。设置位置（pos）；
infoWindow.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
打开（地图）；
}

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

---

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

不清楚是否要显示地图，因此我将向您展示如何执行这两种操作的代码示例

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
    });
  }
}

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
      });
    });
  }
}

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

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
    });
  }
}

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
    });
  }
}

---

希望这有帮助

不清楚是否要显示地图，因此我将向您展示如何执行这两种操作的代码示例

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
    });
  }
}

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
      });
    });
  }
}

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

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
    });
  }
}

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
    });
  }
}

希望这有帮助

我只想在授予权限的情况下显示地图。如果没有，我必须为这个位置设置一些默认坐标。-这是矛盾的。你想不想加载它？可能你想像这里很多问答中解释的那样去做。加载带有默认坐标的地图，然后更改为用户位置（如果您得到它，即如果允许）。我只想在授予权限的情况下显示地图。如果没有，我必须为这个位置设置一些默认坐标。-这是矛盾的。你想不想加载它？可能你想像这里很多问答中解释的那样去做。加载带有默认坐标的地图，然后更改为用户位置（如果您得到它），即，如果允许的话。