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

Posted 2023-02-23

【中文标题】谷歌地图以用户当前位置为中心加上默认位置作为备份

【英文标题】：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 的可能重复项

【参考方案1】：

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

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

navigator.geolocation.getCurrentPosition(success[, error[, options]])Parameterssuccess - 一个接受 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>