Question

我正在设计一个在全屏中包含Google Maps API的小型网络应用程序。该应用程序旨在成功用于移动设备（即使是小型设备）。实际上，我使用Database从我的AJAX获取一些坐标并将它们放在地图中。

我使用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));
}

如何在响应中转换此脚本？我想在屏幕上看到我的所有标记，移动屏幕＆lt; = 768px（宽度），我找不到任何通用处理程序来巧妙地调整大小（放大/缩小）地图以便查看屏幕中的所有标记。

感谢阅读！

Answer 1

您最好的选择是创建一个 LatLngBounds 对象，并使用您想要显示的每个坐标来扩展它。然后，只需在地图对象上调用 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);

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

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

1 个答案: