javascript - 谷歌地图，标记位置正确但中心不正确

Question

我正在尝试在网站上实现谷歌地图，但有一个问题我无法解决，我所有的标记都正确放置但 mapOptions.center 不正确，它几乎放置得很好但定义的中心似乎是放置在地图的左侧。

当我将 mapOptions.center 设置为与主标记完全相同的位置时，我不明白为什么它不能正常工作。

正如您在下面的屏幕截图中看到的，这是我加载页面时地图的默认位置，但它应该以洋红色标记为中心。

这是我的代码：

  var map;
      lat = [51.032308, 51.033263, 51.033089],
      lng = [4.474540, 4.47114, 4.473013],
      officeLat = lat[0],
      officeLng = lng[0],
      parking1Lat = lat[1],
      parking1Lng = lng[1],
      parking2Lat = lat[2],
      parking2Lng = lng[2];

  google.maps.event.addDomListener(window, 'load', init);
  function init() {
      var customPin = './src/img/custom-map-pin.png'
      var parkingPin = './src/img/custom-map-parking-pin.png'
      var drag;
      var zoomIn;
      var offsettop;
      var offsetleft;
      if(window.innerWidth > 667){
        drag = false
        zoomIn = 17
        offsettop = '100px'
        offsetleft = '220px'
      }else{
        drag = true
        zoomIn = 16
        offsettop = '70px'
        offsetleft = '140px'
  }
  var mapOptions = {
      center: new google.maps.LatLng(officeLat, officeLng),
      zoom: zoomIn,
      disableDefaultUI: true,
      draggable: true,


      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#B0B0B0"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
  };
  var contentString = '<ul class="mapInfo" id="mapInfo">'+
    '<li class="mapInfo--item element">Begijnenkerkhof 6A</li>'+
    '<li class="mapInfo--item element">2800 Mechelen</li>'+
    '<li class="mapInfo--item element">Belgium</li>'+
    '<li class="mapInfo--item element">[phone]</li>'+
  '</ul>';


  var map = new google.maps.Map(mapElement, mapOptions);

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(officeLat, officeLng),
      icon: customPin,
      map: map
  });

  var parking1 = new google.maps.Marker({
    position: new google.maps.LatLng(parking1Lat, parking1Lng),
    icon: parkingPin,
    map: map
  });

  var parking2 = new google.maps.Marker({
    position: new google.maps.LatLng(parking2Lat, parking2Lng),
    icon: parkingPin,
    map: map
  })

  var infowindow = new SnazzyInfoWindow({
    marker: marker,
    content: contentString,
    wrapperClass: "infoBox",
    offset: {
      top: offsettop,
      left: offsetleft
    },
    backgroundColor: 'transparent',
    border: false,
    shadow: false,
    closeOnMapClick: false,
    showCloseButton: false

  })
      infowindow.open(map, marker);
}

解决这个问题的方法有什么线索吗？

标签： javascriptgoogle-maps

Answer 1

通过添加一个 setTimeout 来解决，该 setTimeout 在 init 函数的末尾重新定位地图。这个解决方案来自这个问题

 setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(officeLat, officeLng);
    map.setCenter(reCenter);
 }, 500);