谷歌地图API初始缩放错误 [英] google maps api initial zoom error

问题描述

 <？php if（$ _ GET ['postcode']）{？> ; 
 $ b $ // alert（<？php echo $ _GET ['postcode'];？>）
 
<？php}？> 
 
函数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）; 
 $ b $ var addressArray = new Array（<？php echo $ _GET ['postcode'];？>）; 
 var geocoder = new google.maps.Geocoder（）; 
 
 var markerBounds = new google.maps.LatLngBounds（）; （var i = 0; i< addressArray.length; i ++）{
 geocoder.geocode（{'address'：addressArray [i]}，函数（结果，状态）为
 
。 {
 if（status == google.maps.GeocoderStatus.OK）{
 
 var contentString ='< div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div>'+ 
'< h4 id =firstHeadingclass =firstHeading> HELLO< / h4>'+ $ b $< b>< 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）; 
}）; 
 $ b} else {
 alert（地理编码不成功，原因如下：+ status）; 
} 
}）; 
 
 
 
函数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> 
  

由于某些原因，地图加载时，缩放级别已满，因此放大到右侧标记。我试着调整初始化部分的缩放级别，但我没有喜悦。我的猜测是，它与标记边界有关。任何人都知道如何调整缩放比例，以便它不会完全缩放到标记上？

解决方案

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

如果您有边界对象与其中一个LatLng，它应该尽可能放大。从文档：

 
 fitBounds（bounds：LatLngBounds）None设置视口以包含给定边界。 
 

如果您只有一个标记，请不要使用fitBounds，请使用.setCenter（在标记的坐标上.setZoom（to如果您的代码需要处理两种情况（一个标记或多个标记），请计算您添加到边界的标记，如果数字是一个使用.setCenter / .setZoom，如果它不止一个，请使用.fitBounds。

I have the following code:

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

For some reason, when the map loads up, the zoom level is full, so its zoomed right into the marker. I've tried adjusting the zoom level on the initialize section, but I have had no joy. My guess is, that it has something to do with the marker bounds. Anyone know how to adjust the zoom so that it is not fully zoomed on the marker?

解决方案

for some reason, when the map loads up, the zoom level is full, so its zoomed right into the marker.

If you have a bounds object with one LatLng in it, it should zoom in as far as possible. From the documentation:

fitBounds(bounds:LatLngBounds)  None    Sets the viewport to contain the given bounds.

If you only have one marker, don't use fitBounds, use .setCenter (on the coordinates of the marker, .setZoom (to your desired zoom level).

If your code needs to handle both cases (one marker or several markers), count the markers you add to the bounds, if the number is one use .setCenter/.setZoom, if it is more than one, use .fitBounds.

这篇关于谷歌地图API初始缩放错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！