谷歌地图以用户当前位置为中心加上默认位置作为备份答案

【问题标题】：Google Map centred on user's current location PLUS default location as a backup谷歌地图以用户当前位置为中心加上默认位置作为备份
【发布时间】：2018-05-03 12:24:21
【问题描述】：

我的商店定位器设置为以用户当前位置为中心，但是当用户不允许知道他/她的位置时，如何将其设为默认位置？ else 语句中的代码不起作用，但我不知道为什么。这是我所拥有的：

google.maps.event.addDomListener(window, 'load', function() {

(function() {

  if(!!navigator.geolocation) {

      var map;

      var mapOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      navigator.geolocation.getCurrentPosition(function(position) {

          var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

          map.setCenter(geolocate);

      });

  } else {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }

  var panelDiv = document.getElementById('panel');

  var data = new MedicareDataSource;

  var view = new storeLocator.View(map, data, {
    geolocation: false,
    features: data.getFeatures()
  });

  new storeLocator.Panel(panelDiv, {
    view: view
  });

})();
});

【问题讨论】：

Geolocation map by default 的可能重复项

标签： javascript api google-maps google-maps-api-3 maps

【解决方案1】：

else 中的代码不起作用，因为它从未被执行（!!navigator.geolocation 为真）。如果geolocation 可用，但遇到错误，则会调用error 函数，但您没有定义。

getCurrentPosition 方法定义为（来自the documentation）：

navigator.geolocation.getCurrentPosition(success[, error[, options]])
Parameters
success - 一个接受 Position 对象的回调函数作为其唯一的输入参数。
error - 可选 - 一个可选的回调函数，它将 PositionError 对象作为其唯一的输入参数。
options - 可选 - 一个可选的 PositionOptions 对象。

添加错误函数来设置地图的中心：

function error(err) {
  console.log('ERROR('+err.code+'): '+err.message);
  if (map && map.setCenter) map.setCenter(new google.maps.LatLng(37.7749, -122.4194))
};

然后将其添加到.getCurrentPosition 调用中：

  navigator.geolocation.getCurrentPosition(function(position) {
    var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(geolocate);
  }, error);

proof of concept fiddle (https: works)
proof of concept fiddle (http: fails due to non-secure origin)

代码 sn-p：

var map;

function error(err) {
  console.log('ERROR(' + err.code + '): ' + err.message);
  if (map && map.setCenter) map.setCenter(new google.maps.LatLng(37.7749, -122.4194))
};

google.maps.event.addDomListener(window, 'load', function() {

  if (!!navigator.geolocation) {

    var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(geolocate);
    }, error);

  } else {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }
});

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

【讨论】：