Google Maps API缩放大小 [英] Google Maps API zoom on resize

查看：60
本文介绍了Google Maps API缩放大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经搜索，研究并搜索了更多内容.

我正拼命地制作它，因此我的地图使用不同的浏览器大小自动更改其缩放比例，因为它可使地图上的标记保持可见状态.现在最适合我的是:

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);

目前这是我所拥有的:

什么都行不通.

解决方案

修复您的bounds，将其设置为全局并在调整大小处理程序代码中调用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);
});

工作小提琴

代码段:

 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);
}); 

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

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

I have searched, researched and searched some more.

I am desperately trying to make it so my map changes its zoom automatically with different browser sizes as it keeps the markers on the map viewable. Right now the best thing that works for me is:

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

And even that is flawed. When the map becomes smaller, say on a mobile device, the markers eventually leave visibility since the zoom does not change. I need the zoom to change. Seemingly, this is the solution(I've done a lot of research, mostly from Stack Overflow):

map.fitBounds(firstB,secondB);

firstB, and secondB are the latitude and longitude that my markers use for their position.

I've even tried:

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

Currently this is what I have: 

<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>

Nothing works.

解决方案

Fix your bounds, make that global and call map.fitBounds in the resize handler code:

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);

Then:

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

working fiddle

code snippet:

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);
});

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

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

这篇关于Google Maps API缩放大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆