代码之家 › 专栏 › 技术社区 › Lauren Mastroni

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

maps google-maps-api-3 google-maps api javascript

-1

Lauren Mastroni · 技术社区 · 7 年前

我的店铺定位器设置为以用户的当前位置为中心,但当用户不允许知道其位置时,我如何将其默认为位置?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
  });

})();
});

1 回复 | 直到 7 年前

geocodezip 4 年前

else中的代码无法运行,因为它从未执行过( !!navigator.geolocation 是真的)。如果 geolocation 可用,但遇到错误 error 函数将被调用,但您没有定义一个。

getCurrentPosition方法定义为(从 the documentation ):

导航器。地理位置。getCurrentPosition(成功[,错误[,选项]])
参数
成功 -将位置对象作为其唯一输入参数的回调函数。
错误 -可选-一个可选回调函数,将PositionError对象作为其唯一输入参数。
选项 -可选-可选的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)

代码段:

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>