Google Maps API fitBounds(） 如果在调整大小事件后调用，则行为会有所不同

Google Maps API fitBounds() behaves differently if called after resize event

本文关键字：调用 有所不同 小事件 大小事 fitBounds API Maps 调整 如果 Google      更新时间：2023-09-26

我正在使用谷歌地图api在具有移动和桌面视图的网站上显示飞行路径。如果显示宽度低于 320px，则移动视图将隐藏包含的div（显示：无）。如果用户将手机切换到横向模式，则div 和地图将变为可见。但是，如果我以横向模式加载页面，则地图会显示另一个缩放级别，而不是以纵向模式加载页面（未显示地图）然后旋转为横向。触发 resize 事件，在其中我调用 fitBounds（）。知道吗？？

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://www.foo.bar/label.js"></script>
<script>
var bounds = new google.maps.LatLngBounds(null);
var map = null;
var myLatLng = null;
function initialize() {
  var mapOptions = {
    panControl: true,
    scaleControl: false,
    overviewMapControl: false,
    zoomControl: true,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: { lat: 0.0, lng: 0.0},
    zoom: 2
  };
  var destinations = [
    {lat:25.073858, lng:55.2298444, myTitle:'Dubai'},
    {lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'},
    {lat:8.722049, lng:98.23421, myTitle:'Khao Lak'},
    {lat:1.3146631, lng:103.8454093, myTitle:'Singapore'}
  ];
  var image = {
     url: 'plane-icon-medium.png',
     // This marker is 24 pixels wide by 24 pixels tall.
     size: new google.maps.Size(48, 48),
     // The origin for this image is 0,0.
     origin: new google.maps.Point(0,0),
     // The anchor for this image is the middle at 12,12.
     anchor: new google.maps.Point(12, 12)
   };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var flightPath = new google.maps.Polyline({
    path: destinations,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);
  for (var i = 0; i < destinations.length; i++) {
    var myTitle = destinations[i].myTitle;
    myLatLng = new google.maps.LatLng(destinations[i].lat, destinations[i].lng);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: 'test',
        text: myTitle,
    });
    var label = new Label({
       map: map
    });
    label.bindTo('position', marker, 'position');
    label.bindTo('text', marker, 'text');
    bounds.extend(marker.position);
  }
  map.fitBounds(bounds);
  if(map.getZoom() == 0) map.setZoom(1);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
     google.maps.event.trigger(map, "resize");
     map.fitBounds(bounds);
     //alert("Resize Event fired");
     //if(map.getZoom() == 0) map.setZoom(1);
    });
</script>
<div id="map_canvas"></div>

谢谢克莱曼

尝试禁用 Google API 的默认 UI。我认为您的地图没有在纵向上平移。该代码段显示了用于禁用它的模板。希望对您有所帮助。

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
       mapOptions);
}

相关文章：