Question

我在网站上遇到 Google地图的问题。

通过使用PHP，JS和Google Maps Api 3，我能够生成带有各种标记的Map，从数据库MySql中选择它们。每个人都有一个类别（'Turismo'和'Mangiare'），所以有两个简单的函数和两个复选框（在HTML表单中）我可以隐藏或显示每个类别。

问题是我每次点击复选框时都需要在地图中仅使用VibIBLE Markers。所以，我正在尝试使用stackoverflow中的函数，但我无法使其工作。 :( 控制台在此行“map.fitBounds（bounds）;”上给出了“undefined”错误。也许它与全局变量“map”有关！

以下是我的脚本代码：

<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);

因为您已经将变量映射初始化为上面的全局范围。通过添加＆＃39; var＆＃39;您正在将地图对象的范围限制为初始化函数

谷歌地图Api 3 - 可见标记上的fitBounds不起作用

1 个答案: