Google Maps API可放大调整大小

Question

我已经搜索，研究和搜索了一些。

我正在拼命尝试这样做，因此我的地图会根据不同的浏览器尺寸自动更改其缩放，因为它可以使地图上的标记保持可见状态。现在，对我有用的最好的事情是：

google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

即便如此也是有缺陷的。当地图变小时，例如在移动设备上，标记最终会保持可见性，因为缩放不会改变。我需要变焦才能改变。看起来，这就是解决方案（我做了很多研究，主要来自Stack Overflow）：

map.fitBounds(firstB,secondB);

firstB，secondB是我的标记用于其位置的纬度和经度。

我甚至尝试过：

bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);

目前这就是我所拥有的：

<script>
var geocoder;
var map;

function initialize() {
  firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
  secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(38.938987, -104.717286);
  var mapOptions = {
    zoom:18,
    center:latlng,
    disableDefaultUI:true
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.fitBounds(firstB,secondB);

  var styles=[
  {
    featureType:"road",
    elementType:"labels",
    stylers:[
      {visibility:"off"}
    ]
  }
  ];
  map.setOptions({styles: styles});

var pinIcon = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(52, 52)
);  

  var marker = new google.maps.Marker({
      position: firstB,
      map: map,
      title: 'AVS',
      icon:pinIcon,
  }); 

  var firstB_contentString = '<div><p>Medical Office Building</p><a href="MOB/architectural-layout.html"><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></a></div>';

  var firstB_infowindow = new google.maps.InfoWindow({
    content: firstB_contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
  firstB_infowindow.open(map,marker);
});

  var smarker = new google.maps.Marker({
      position: secondB,
      map: map,
      title: 'AVS',
      icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
  }); 
  var secondB_contentString = '<div><p>General Hospital</p><a href="MAIN/architectural-layout.html"><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></a></div>';

  var secondB_infowindow = new google.maps.InfoWindow({
    content: secondB_contentString
  });
google.maps.event.addListener(smarker, 'click', function() {
  secondB_infowindow.open(map,smarker);
});

google.maps.event.addListener(map, 'mousedown', function() {
  firstB_infowindow.close(map,marker);
  secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
  firstB_infowindow.close();
  secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
  firstB_infowindow.close();
  secondB_infowindow.close();
});

/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/

}
google.maps.event.addDomListener(window, 'load', initialize);


/*google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center);
});*/

    </script>

<script> var geocoder; var map; function initialize() { firstB = new google.maps.LatLng(38.9395799,-104.7168500999999); secondB = new google.maps.LatLng(38.9382571,-104.71727069999997); geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(38.938987, -104.717286); var mapOptions = { zoom:18, center:latlng, disableDefaultUI:true } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); map.fitBounds(firstB,secondB); var styles=[ { featureType:"road", elementType:"labels", stylers:[ {visibility:"off"} ] } ]; map.setOptions({styles: styles}); var pinIcon = new google.maps.MarkerImage( 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(52, 52) ); var marker = new google.maps.Marker({ position: firstB, map: map, title: 'AVS', icon:pinIcon, }); var firstB_contentString = '<div><p>Medical Office Building</p><a href="MOB/architectural-layout.html"><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></a></div>'; var firstB_infowindow = new google.maps.InfoWindow({ content: firstB_contentString }); google.maps.event.addListener(marker, 'click', function() { firstB_infowindow.open(map,marker); }); var smarker = new google.maps.Marker({ position: secondB, map: map, title: 'AVS', icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' }); var secondB_contentString = '<div><p>General Hospital</p><a href="MAIN/architectural-layout.html"><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></a></div>'; var secondB_infowindow = new google.maps.InfoWindow({ content: secondB_contentString }); google.maps.event.addListener(smarker, 'click', function() { secondB_infowindow.open(map,smarker); }); google.maps.event.addListener(map, 'mousedown', function() { firstB_infowindow.close(map,marker); secondB_infowindow.close(map,smarker); }); google.maps.event.addListener(marker, 'mousedown', function() { firstB_infowindow.close(); secondB_infowindow.close(); }); google.maps.event.addListener(smarker, 'mousedown', function() { firstB_infowindow.close(); secondB_infowindow.close(); }); /*bounds = new google.maps.LatLngBounds(); bounds.extend(marker); bounds.extend(smarker); map.fitBounds(bounds);*/ } google.maps.event.addDomListener(window, 'load', initialize); /*google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });*/ </script> 什么都行不通。

Answer 1

修复你的bounds，使其成为全局，并在resize处理程序代码中调用map.fitBounds：

var bounds = new google.maps.LatLngBounds();

function initialize() {
  var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
  var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
  bounds.extend(firstB);
  bounds.extend(secondB);

然后：

google.maps.event.addDomListener(window, "resize", function() {
 google.maps.event.trigger(map, "resize");
 map.fitBounds(bounds);
});

working fiddle

代码段：

＆＃13;

＆＃13;

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
  var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
    bounds.extend(firstB);
    bounds.extend(secondB);
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(38.938987, -104.717286);
  var mapOptions = {
    zoom:18,
    center:latlng,
    disableDefaultUI:true
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.fitBounds(bounds);

  var styles=[
  {
    featureType:"road",
    elementType:"labels",
    stylers:[
      {visibility:"off"}
    ]
  }
  ];
  map.setOptions({styles: styles});

var pinIcon = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(52, 52)
);  

  var marker = new google.maps.Marker({
      position: firstB,
      map: map,
      title: 'AVS',
      icon:pinIcon,
  }); 

  var firstB_contentString = '<div><p>Medical Office Building</p><a href="MOB/architectural-layout.html"><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></a></div>';

  var firstB_infowindow = new google.maps.InfoWindow({
    content: firstB_contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
  firstB_infowindow.open(map,marker);
});

  var smarker = new google.maps.Marker({
      position: secondB,
      map: map,
      title: 'AVS',
      icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
  }); 
  var secondB_contentString = '<div><p>General Hospital</p><a href="MAIN/architectural-layout.html"><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></a></div>';

  var secondB_infowindow = new google.maps.InfoWindow({
    content: secondB_contentString
  });
google.maps.event.addListener(smarker, 'click', function() {
  secondB_infowindow.open(map,smarker);
});

google.maps.event.addListener(map, 'mousedown', function() {
  firstB_infowindow.close(map,marker);
  secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
  firstB_infowindow.close();
  secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
  firstB_infowindow.close();
  secondB_infowindow.close();
});

/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/

}
google.maps.event.addDomListener(window, 'load', initialize);


google.maps.event.addDomListener(window, "resize", function() {
 google.maps.event.trigger(map, "resize");
 map.fitBounds(bounds);
});

＆＃13;

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

＆＃13;

＆＃13;