Google地图自动适应（自动中心和自动缩放）不起作用 [英] Google maps auto-fit (auto center & autozoom) doesn't work

问题描述

我在使用 fitBounds 地图方法的地图上遇到了问题，该方法应该给出正确的缩放并将地图居中放置一个latlon数组。以下是代码：

 < script type =text / javascript
 src =http：// maps .googleapis.com /地图/ API / JS传感器=假>？; 
< / script> 
 
 
< div id =map_canvas> 
 
< script type =text / javascript> 
 var map; 
 var bounds = new google.maps.LatLngBounds（null）; 
 
函数initialize（）{
 var mapOptions = {
 
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 
 
 $ b<？php 
 foreach（$ this-> getProductCollection（）as $ _e）：
 $ event = Mage :: getModel （ '目录/产品'） - >负载（$ _ E->的getId（））; 
？> 
 var loc = new google.maps.LatLng（<？php echo $ event-> getEventLocationLatitude（）;？>，<？php echo $ event-> getEventLocationLongitude（）;？ >中）; 
 bounds.extend（loc）; 
 addMarker（loc，'<？php echo $ event-> getName（）;？>'，active）; 
 bounds.extend（loc）; 
 
<？php endforeach; ？> 
 
 
 map.fitBounds（bounds）; 
 map.panToBounds（bounds）; 
 
 
 
 
 $ b函数addMarker（location，name，active）{
 var marker = new google.maps.Marker（{ 
位置：位置，
地图：地图，
标题：名称，
状态：活动
}）; 
 
} 
 
 
 
 jQuery.noConflict（）; 
 
 jQuery（document）.ready（function（）{
 initialize（）; 
}）; 
< / script> 
  

标记正确放置在地图，但我得到的最大缩放可用：

任何帮助？

解决方案

I已更新你的小提琴： http://jsfiddle.net/KwayW/1/

现在按预期工作。

下面是完整的代码（保存为test.html并在浏览器中打开）：

 < style> #map_canvas {width：500px; height：400px; }< /风格> 
< script src =http://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js>< / script> 
 
< div id =map_canvas>< / div> 
 
< script> 
 var map; 
 var markersArray = []; 
 var image ='img /'; 
 var bounds = new google.maps.LatLngBounds（）; 
 var loc; 
 
函数init（）{
 var mapOptions = {mapTypeId：google.maps.MapTypeId.ROADMAP}; 
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 
 loc = new google.maps.LatLng（45.478294，9.123949）; 
 bounds.extend（loc）; 
 addMarker（loc，'Event A'，'active'）; 
 
 loc = new google.maps.LatLng（50.83417876788752，4.298325777053833）; 
 bounds.extend（loc）; 
 addMarker（loc，'Event B'，active）; 
 
 loc = new google.maps.LatLng（41.3887035，2.1807378）; 
 bounds.extend（loc）; 
 addMarker（loc，'Event C'，active）; 
 
 map.fitBounds（bounds）; 
 map.panToBounds（bounds）; 
 
 
函数addMarker（location，name，active）{
 var marker = new google.maps.Marker（{
 position：location，
 map：map，
 title：name，
 status：active 
}）; 
} 
 
 $（function（）{init（）;}）; 
< / script> 
  

I have a problem with a map on which I've used the fitBounds map methods, which should give the proper zoom and center the map giving it a latlon array. here's the code:

<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>


<div id="map_canvas">

<script type="text/javascript">
    var map;
    var bounds = new google.maps.LatLngBounds(null);

    function initialize() {
        var mapOptions = {       

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



        <?php
        foreach ($this->getProductCollection() as $_e):
            $event = Mage::getModel('catalog/product')->load($_e->getId());
            ?>
                var loc = new google.maps.LatLng("<?php echo $event->getEventLocationLatitude(); ?>","<?php echo $event->getEventLocationLongitude(); ?>");
                 bounds.extend(loc);
                addMarker(loc, '<?php echo $event->getName(); ?>', "active");
                bounds.extend(loc);

        <?php endforeach; ?>


        map.fitBounds(bounds);
        map.panToBounds(bounds);


    }


function addMarker(location, name, active) {          
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: name,
        status: active
    });

}



jQuery.noConflict();

jQuery(document).ready(function(){
    initialize();
});
</script>

The markers are correctly placed on the map, but I get the maximum zoom available:

Any help?

解决方案

I've updated your fiddle here: http://jsfiddle.net/KwayW/1/

It works now as expected.

Here's the full code (save this as test.html and open in browser):

<style>#map_canvas { width:500px; height: 400px; }</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<div id="map_canvas"></div>

<script>
var map;
var markersArray = [];
var image = 'img/';
var bounds = new google.maps.LatLngBounds();
var loc;

function init(){
    var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    loc = new google.maps.LatLng("45.478294","9.123949");
    bounds.extend(loc);
    addMarker(loc, 'Event A', "active");

    loc = new google.maps.LatLng("50.83417876788752","4.298325777053833");
    bounds.extend(loc);
    addMarker(loc, 'Event B', "active");

    loc = new google.maps.LatLng("41.3887035","2.1807378");
    bounds.extend(loc);
    addMarker(loc, 'Event C', "active");

    map.fitBounds(bounds);
    map.panToBounds(bounds);    
}

function addMarker(location, name, active) {          
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: name,
        status: active
    });
}

$(function(){ init(); });
</script>

这篇关于Google地图自动适应（自动中心和自动缩放）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！