使我的谷歌地图 fitBounds [重复]答案

【问题标题】：Making my google-map fitBounds [duplicate]使我的谷歌地图 fitBounds [重复]
【发布时间】：2017-03-23 01:56:51
【问题描述】：

我基本上想创建放大到与 SE-NW 角相对应的大小的地图。我尝试了很多变化，但无法让它发挥作用。我设法在我的脚本的一个版本上放置了两个标记，但无法使地图放大到标记的大小。我不需要标记，我只是在框外思考。我将在下面包含我的工作脚本，但如果能帮助 fitBounds 工作，我将不胜感激。我已经为此扎实工作了两天，但我不是程序员，所以我在这个网站上找到的很多解决方案和其他解决方案都不太有意义，或者它们没有解决我的确切问题。

<!DOCTYPE html>
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates -->
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand -->
<html>
<head>
<title>Google Road Maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(56.3,4.3),
    zoom:8,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    disableDefaultUI:true,     
    scaleControl: true
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

var fitBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(53.3,-0.7), 
  new google.maps.LatLng(59.3,9.3)
);
</script>
</head>
<body>
<div id="googleMap" style="width:600mm;height:600mm;"></div>
</body>
</html>

【问题讨论】：

标签： javascript google-maps fitbounds

【解决方案1】：

您需要使用您的fitBounds 对象调用Map.fitBounds。

map.fitBounds(fitBounds);

proof of concept fiddle

代码 sn-p：

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(56.3, 4.3),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    scaleControl: true
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  map.fitBounds(fitBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(53.3, -0.7),
  new google.maps.LatLng(59.3, 9.3)
);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

【讨论】：