Javascript 谷歌地图，标记位置正确但不居中

我试图在一个网站上实现谷歌地图，但有一个问题我无法解决，我所有的标记都正确放置，但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">+32 15 20 37 81</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);
}

var映射；
纬度=[51.032308,51.033263,51.033089]，
液化天然气=[4.474540,4.47114,4.473013]，
officeLat=lat[0]，
Officeling=lng[0]，
驻车高度=横向[1]，
停车量=液化天然气[1]，
驻车2LAT=横向[2]，
停车2lng=液化天然气[2]；
google.maps.event.addDomListener（窗口'load'，init）；
函数init（）{
var customPin='./src/img/custom-map-pin.png'
var parkingPin='./src/img/custom-map-parkingPin.png'
var阻力；
变焦蛋白；
var补偿；
var抵销损失；
如果（window.innerWidth>667）{
拖动=错误
zoomIn=17
偏移量='100px'
offsetleft='220px'
}否则{
拖动=真
zoomIn=16
偏移量='70px'
offsetleft='140px'
}
变量映射选项={
中心：新google.maps.LatLng（officeLat，Officeling），
缩放：缩放，
disableDefaultUI:true，
真的，
样式：[{“featureType”：“water”，“elementType”：“geometry”，“stylers”：[{“color”：“#e9e9e9”}，{“lightness”：17}，{“featureType”：“景观”，“elementType”：“geometry”，“stylers”：[{“color”：“#f5f5f5”}，{“lightness”：20}，{“featureType”：“road.highway”，“elementType”：“geometry.fill”：“geometry.fill”，“stylers”：“{“color”：“ffffff”}，{“lightness”：“公路”{“lightness”：}，{“公路”}，{，“元素类型”：“geometry.stroke”，“stylers”：[{“color”：“#ffffff”}，{“lightness”：29}，{“weight”：0.2}，{“featureType”：“road.Arteral”，“elementType”：“geometry”，“stylers”：[{“color”：“#ffffff”}，{“lightness”：18}，{“featureType”：“road.local”，“elementType”：“geometry”，“stylers”：[{“color”：“FFFF”}，{“lightness”：“lightness”：“}，{”16}，{“featureType”：几何体、样式器：[{“颜色”：“{F5F5”}、{“亮度”：21}、{“特征类型”：“poi.park”、“元素类型”：“几何体”、“样式器”：[{“颜色”：“{”dedededede”}、{“亮度”：21}、{“元素类型”：“标签.文本.笔划”、“样式器”[{“可见性”：“打开”}、{“颜色”：“{”FFFFFFFF”}、{“亮度”：16}、{“标签.文本.填充”、“样式器”}、{，{“亮度”：40}}}，{“元素类型”：“标签.图标”，“样式器”：[{“可见性”：“关闭”}}，{“特性类型”：“过渡”，“元素类型”：“几何体”，“样式器”：[{“颜色”：“#f2f2f2”}，{“亮度”：19}}，{“特性类型”：“管理”，“元素类型”：“几何体.填充”，“样式器”：[{“颜色”：“#FEFEFEFE”}，{“亮度”：20}，{“特性类型”：“管理”，“元素类型”：“管理”，“元素类型”：几何学.stroke，“stylers”：[{“color”：“#fefefe”}，{“lightness”：17}，{“weight”：1.2}]}]
};
var contentString='
'+
“
Begijnenkerkhof 6A
”+
“
2800 Mechelen
”+
比利时'+
“
+32 15 20 37 81
”+
“
”；
var map=new google.maps.map（mapElement，mapOptions）；
var marker=new google.maps.marker({
职位：新google.maps.LatLng（officeLat，Officeling），
图标：customPin，
地图：地图
});
var parking1=新的google.maps.Marker({
位置：新google.maps.LatLng（parking1Lat，parking1Lng），
图标：parkingPin，
地图：地图
});
var parking2=新的google.maps.Marker({
位置：新google.maps.LatLng（parking2Lat，parking2Lng），
图标：parkingPin，
地图：地图
})
var infowindow=新的SnazzyInfo窗口({
马克：马克，
content:contentString，
包装类：“信息盒”，
偏移量：{
顶部：Offsetop，
左：offsetleft
},
背景色：“透明”，
边界：错，
影子：错，
closeOnMapClick:false，
showCloseButton:错误
})
信息窗口。打开（地图、标记）；
}

---

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

通过在init函数末尾添加一个setTimeout重新居中映射来解决。 这个解决方案来自

您应该尝试向地图对象添加fitBounds选项，如：

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

---

阅读更多信息：

您是否注意到您似乎面临着类似的问题，而不是使用中心的地图选项？您在初始化地图以使用设置中心功能时是否尝试过？var latLng=new google.maps.latLng（latitude，lotitude）；map.setCenter（latLng）@Deadsven先生是的，我忘了说我尝试了两种选择，但都没有worked@casualcoder以前没有发现这个问题，谢谢，它只是帮助我解决了我的问题。谢谢你的回答，我以前也尝试过，同样的结果，因为现在只添加了一个setTimeout来在页面加载后重新加载地图就成功了

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