Question

我正在尝试在网站上实现Google地图，但是有一个我无法解决的问题，我所有的标记都正确放置，但是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);
}

有什么线索可以解决该问题吗？

Answer 1

通过添加setTimeout来解决，该setTimeout使init函数末尾的地图更新。此解决方案来自this question

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

Answer 2

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

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

了解更多信息：Google Maps Api

Google Maps，标记位置正确，但中心不正确

2 个答案: