Javascript + Google Map：如何获取地理位置然后分配地图中心？答案

【问题标题】：Javascript + Google Map: how to get geolocation and then assign center of the map?Javascript + Google Map：如何获取地理位置然后分配地图中心？
【发布时间】：2018-07-10 03:21:00
【问题描述】：

这可能是一个非常基本的问题。我有代码工作，但它在逻辑上是错误的。

我需要找到地理位置并在那里设置地图中心。如果我无法访问地理位置，那么我想将中心设置在新天堂。我知道我应该使用回调，但我不知道如何。

现在代码可以工作，但速度很慢。它首先将中心设置为新天堂，然后跳转到真正的地理位置。我想马上去真正的。我应该如何做到这一点？

谢谢。

$(document).ready(function() {

let canvas = $("#map-canvas").get(0);

// Styles for map
// https://developers.google.com/maps/documentation/javascript/styling
let styles = [
    // Hide Google's labels
    {
        featureType: "all",
        elementType: "labels",
        stylers: [
            {visibility: "off"}
        ]
    },
    // Hide roads
    {
        featureType: "road",
        elementType: "geometry",
        stylers: [
            {visibility: "off"}
        ]
    }
];
// Options for map
// https://developers.google.com/maps/documentation/javascript/reference#MapOptions
let options = {
    center: {lat: 41.3184, lng: -72.9318},//new heaven
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    maxZoom: 14,
    panControl: true,
    styles: styles,
    zoom: 13,
    zoomControl: true
};

// Instantiate map
map = new google.maps.Map(canvas, options);

//reset center if geolocation is accessible (HERE IS THE PROBLEM)
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        map.setCenter(pos);
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map:map,
        label:"Around Me"
        });
    });
}

});

【问题讨论】：

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

【解决方案1】：

如果您不希望它以“新天堂”为中心，则在地理位置回调返回值之前不要设置中心。这样做的缺点是，如果地理定位失败（用户拒绝，或者浏览器不支持），地图根本不会显示。

proof of concept fiddle

$(document).ready(function() {

  let canvas = $("#map-canvas").get(0);

  // Styles for map
  // https://developers.google.com/maps/documentation/javascript/styling
  let styles = [
    // Hide Google's labels
    {
      featureType: "all",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    },
    // Hide roads
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{
        visibility: "off"
      }]
    }
  ];
  // Options for map
  // https://developers.google.com/maps/documentation/javascript/reference#MapOptions
  let options = {
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    maxZoom: 14,
    panControl: true,
    styles: styles,
    zoom: 13,
    zoomControl: true
  };

  // Instantiate map
  map = new google.maps.Map(canvas, options);

  //reset center if geolocation is accessible (HERE IS THE PROBLEM)
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(pos);
      var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        label: "Around Me"
      });
    });
  }

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

【讨论】：