Google Maps Api 3 - fitBounds на видимых маркерах не работает

Question

У меня проблема с Google Maps на веб-сайте.

Используя PHP, JS и Google Maps Api 3, я могу создать карту с различными маркерами, выбрав их из базы данных MySql. У каждого есть категория («Turismo» и «Mangiare»), поэтому с двумя простыми функциями и двумя флажками (в форме HTML) я могу скрыть или показать каждую категорию.

Проблема заключается в том, что мне нужно приспосабливать только VISIBLE Markers на карте каждый раз, когда я нажимаю на флажок. Итак, я пытаюсь использовать функцию, найденную здесь в stackoverflow, но я не могу заставить ее работать. :( Консоль дает мне ошибку «неопределенные» на этой линии «map.fitBounds (границы);».! Может быть, это связано с глобальной переменной «карте»

Вот мой Script код:.

<script type="text/javascript">// <![CDATA[ 

    var markers = [       
        <? for ($i=0; $i<count($elementi); $i++) { ?> 
        ['<?=$elementi[$i]['elem']?>', <?=$elementi[$i]['e_coord']?>, 'marker/mk_<?=$elementi[$i]['icona']?>.png', '<?=$i+1?>', "turismo"], 
        <? } ?> 
        <? for ($i=0; $i<count($recensioni_mangiare); $i++) { ?>  
        ['<?=$recensioni_mangiare[$i]['Prod']?>', <?=$recensioni_mangiare[$i]['map_lat']?>, <?=$recensioni_mangiare[$i]['map_lon']?>, 'marker/mk_mangiare.png', '<?=$i+1?>', "mangiare"], 
        <? } ?>    
    ]; 
var map; 
var gmarkers = []; 
var infowindow = new google.maps.InfoWindow({ 
         maxWidth: 400 
        }); 




function initialize() { 
         var mapOptions = { 
         zoom: <?=$itinerario['zoom']?>, 
         center: new google.maps.LatLng(<?=$itinerario['coord']?>) 
        }; 

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

        var infowindow = new google.maps.InfoWindow({ 
         maxWidth: 400 
        }); 
        var marker, i; 
        var bounds = new google.maps.LatLngBounds(); 

        for (i = 0; i < markers.length; i++) { 
         var pos = new google.maps.LatLng(markers[i][1], markers[i][2]); 
         bounds.extend(pos); 
         marker = new google.maps.Marker({ 
          position: pos, 
          map: map, 
          icon: markers[i][3], 
          title: markers[i][0], 
          tipo: markers[i][5], 
          visible: true 
         }); 
         marker.tipologia = markers[i][5]; 
         gmarkers.push(marker);       
         google.maps.event.addListener(marker, 'click', (function(marker, i) { 
          return function() { 
           infowindow.setContent(markers[i][4]); 
           infowindow.open(map, marker); 
          } 
         })(marker, i)); 
        } 
        show('turismo'); 
        hide('mangiare');    
        map.fitBounds(bounds); 
        } 

function show(type) { 
    for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].tipologia == type) { 
     gmarkers[i].setVisible(true); 
     } 
    } 
    document.getElementById(type+"box").checked = true; 
    } 

    function hide(type) { 
    var bounds = new google.maps.LatLngBounds(null); 
    for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].tipologia == type) { 
     gmarkers[i].setVisible(false); 
     } 
    } 
    document.getElementById(type+"box").checked = false; 
    infowindow.close(); 
    } 

    function boxclick(box,tipo) { 
    if (box.checked) { 
     show(tipo); 
    } else { 
     hide(tipo); 
    } 
    fitBoundsToVisibleMarkers(); 
    } 

    function fitBoundsToVisibleMarkers() { 
    var bounds = new google.maps.LatLngBounds(null); 
    for (var i in gmarkers) { 
     if(gmarkers[i].getVisible()) { 
      bounds.extend(gmarkers[i].getPosition()); 
     } 
    } 
    map.fitBounds(bounds); 
} 

</script> 

Спасибо Ребята

Answer 1

Вам необходимо назначить карту в глобальном масштабе в вашем изменении функции инициализации

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

в

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

, поскольку вы уже инициализации переменной карту в глобальную область видимости выше. Добавляя «var», вы ограничиваете область действия объекта карты функцией инициализации.