javascript - 响应式 Google map API v3 - 自动在小屏幕上显示所有标记

Question

我正在设计一个小型网络应用程序，其中包含全屏中的Google Maps API。该网络应用程序旨在在移动设备(甚至小型设备)中成功使用。实际上，我使用 AJAX 从我的数据库中获取一些坐标，并将它们放置在 map 中。

我使用 AJAX 将坐标推送到数组 locations 中，然后执行以下操作:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(37.262577, -115.8314989),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.BOTTOM_LEFT
  }
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    //locations[i][1] is lang
    //locations[i][2] is lng
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

如何将此脚本转换为响应式？我想在屏幕上看到我的所有标记，移动屏幕 <= 768px(宽度)，我找不到任何通用处理程序来智能调整(放大/缩小) map 大小，以便查看屏幕中的所有标记。

感谢您的阅读!

Answer 1

您最好的选择是创建一个LatLngBounds对象，并用您想要显示的每对坐标来扩展它。然后，只需在 map 对象上调用 fitBounds() ，并将边界作为参数，如下所示:

var marker, i;
var bounds = new google.maps.LatLngBounds()
for (i = 0; i < locations.length; i++) {  
  var coords =  new google.maps.LatLng(parseFloat(locations[i][1]), parseFloat(locations[i][2]))
  marker = new google.maps.Marker({
    //locations[i][1] is lang
    //locations[i][2] is lng
    position: coords,
    map: map
  });
  
  bounds.extend(coords);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

map.fitBounds(bounds);

如果您只想在需要时应用，那么您必须通过比较它们的四肢来比较使用 map.getBounds() 创建的变量边界:getNorthEast() 和 getSouthWest( )坐标。