谷歌地图API初始缩放错误

Question

我有以下代码：

<?php if($_GET['postcode']){ ?>

//alert(<?php echo $_GET['postcode'];?>)

<?php }?>

      function initialize() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng("<?php echo $_GET['postcode'];?>"),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
        map.setTilt(45);

        var addressArray = new Array("<?php echo $_GET['postcode'];?>");
        var geocoder = new google.maps.Geocoder();

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

        for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4 id="firstHeading" class="firstHeading">HELLO</h4>'+
        '<div id="bodyContent">'+
        '<p><b>Hello!!</b>' + <?php echo $_GET["order_id"];?> + '</p>'+
        '</div>'+
        '</div>';

        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });

        var marker = new google.maps.Marker({
        map: map, 
        title:"Order Number",
        position: results[0].geometry.location
        });

        markerBounds.extend(results[0].geometry.location);
        map.fitBounds(markerBounds);

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        });

        } else {
        alert("Geocode was not successful for the following reason: " + status);
        }
        });
        }
      }

      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
            'callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>

由于某种原因，当地图加载时，缩放级别已满，因此它会直接缩放到标记中。我尝试过调整初始化部分的缩放级别，但我没有得到任何乐趣。我的猜测是，这与标记边界有关。有人知道如何调整缩放比例，使其不会完全缩放到标记上吗？

Answer 1

由于某种原因，当地图加载时，缩放级别已满，因此它会直接放大到 标记。

如果您有一个包含一个 LatLng 的 bounds 对象，它应该尽可能地放大。 来自文档：

fitBounds(bounds:LatLngBounds) 无 设置视口以包含给定的边界。

如果您只有一个标记，请不要使用 fitBounds，而使用 .setCenter （在标记的坐标上，.setZoom （到您想要的缩放级别）。

如果您的代码需要处理这两种情况（一个标记或多个标记），请计算添加到边界的标记数，如果数量为 1，请使用 .setCenter/.setZoom，如果数量超过 1，请使用 .fitBounds。

代码片段（2 个标记）

var markerCount = 0;
function initialize() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(40.731,-73.997),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
        map.setTilt(45);

        var addressArray = ["10018","07102"];
        var geocoder = new google.maps.Geocoder();

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

        for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4 id="firstHeading" class="firstHeading">HELLO</h4>'+
        '<div id="bodyContent">'+
        '<p><b>Hello!!</b>' + i + '</p>'+
        '</div>'+
        '</div>';

        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });

        var marker = new google.maps.Marker({
        map: map, 
        title:"Order Number",
        position: results[0].geometry.location
        });

        markerBounds.extend(results[0].geometry.location);
        markerCount++;
        if (markerCount<2) {
          map.setCenter(marker.getPosition());
          map.setZoom(15);
        } else {
          map.fitBounds(markerBounds);
        }

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        });

        } else {
        alert("Geocode was not successful for the following reason: " + status);
        }
        });
        }
      }

      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&' +
            'callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map_canvas {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>
<head>
</head>
<body>
<div id="map_canvas"></div>
 </body>
</html>

代码片段（1 个标记）

var markerCount = 0;
function initialize() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(40.731,-73.997),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
        map.setTilt(45);

        var addressArray = ["10018"];
        var geocoder = new google.maps.Geocoder();

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

        for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4 id="firstHeading" class="firstHeading">HELLO</h4>'+
        '<div id="bodyContent">'+
        '<p><b>Hello!!</b>' + i + '</p>'+
        '</div>'+
        '</div>';

        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });

        var marker = new google.maps.Marker({
        map: map, 
        title:"Order Number",
        position: results[0].geometry.location
        });

        markerBounds.extend(results[0].geometry.location);
        markerCount++;
        if (markerCount<2) {
          map.setCenter(marker.getPosition());
          map.setZoom(15);
        } else {
          map.fitBounds(markerBounds);
        }

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        });

        } else {
        alert("Geocode was not successful for the following reason: " + status);
        }
        });
        }
      }

      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&' +
            'callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map_canvas {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>
<head>
</head>
<body>
<div id="map_canvas"></div>
 </body>
</html>