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>

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;

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;

Google Maps API可放大调整大小

1 个答案: