google-maps - データベース cat からの動的な infowindow 配列が機能します。さまざまなマーカー タイプとマーカー クラスターの表示/非表示を 1 つに組み込みました

Question

マップを 1 か月以上機能させようとしています。私は多くの投稿を読みましたが、100％動作させることはできません。ここからあらゆる種類の提案を試しました。これまでのところ、クラスター マーカーは機能し、マーカー タイプの表示/非表示は機能します。問題は、ループを使用して各マーカーの動的な情報ウィンドウを取得できないことです。これまでのところ、名前などに location[i][0] を使用するとデータを取得できます。主な問題は、情報ウィンドウに詳細ページへのリンクが必要なことです。その能力がなければ、この地図には意味がありません。誰かがアドバイスや解決策を与えることができれば、それは素晴らしいことです。

contentInfoWindow は、infowindow.setContent で使用すると、情報ウィンドウにブレーキをかけます。infowindow.setContent は、infowindow.setContent(locations[i][0]);名前を表示するためにこのように使用された場合にのみ機能します。さらに場所の配列を追加することもできますが、それは私が必要とするものではありません。

ここに完全なコードがあります。

function getHtmlInfoWindow($item)
    {
    if($item->imagename!=NULL){ $img=$item->imagename->name;}else{$img='noimage.jpg';}
   $myHtml='';
   $myHtml .='<div id="propertydetail"><div class="title">';
   $myHtml .='<a target="_parent" href="'. $item->link.'" title="'.str_replace('"',' ',$item->name).'">'.$item->name.'</a></div>';
   $myHtml .='<div class="image"><img src="images/properties/images/thumbs/'.$item->id.'/'.$img.'" alt="'.str_replace('"',' ',$item->name).'" width="100" height="75"></div>';
   $myHtml .='<div class="text">';
    if ($item->name_type) {
      $myHtml .=JText::_($item->name_type).'<br />';
   }
   if ($item->name_category) {
      $myHtml .=JText::_($item->name_category).'<br />';
   }
   if ($item->name_locality) {
      $myHtml .=JText::_($item->name_locality).'<br />';
   }
   if ($item->address) {
      $myHtml .=JText::_($item->address).'<br />';
   }
   $myHtml .='</div>';
   $myHtml .='<div class="property_button">';
   $myHtmlimg ='<a target="_parent" class="BottomlnkDetail" href="'.$item->link.'" title="'.$item->id.'">'.JText::_('MOD_PROP_MAP_VIEW_DETAILS').'</a>';
   //$myHtml .='<button type="button" id="sbox-btn-close" onclick="window.parent.document.getElementById(\\\'sbox-window\\\').close();window.close();">Cancelar</button>';
   $myHtml .='</div>';
   $myHtml .='</div>';
    return $myHtml;
    }

   $useTranslations=$cParams->get('useTranslations','0');
   if($useTranslations)
    {
      $lang =& JFactory::getLanguage();
      $thisLang = $lang->getTag();
    }else{
      $thisLang  = NULL;
    }
   $item=$list[0];
   $MapDistance=$params->get('MapDistance',14);
   $lat = $item->lat;
   $lng = $item->lng;
?>



 <div id="map" style="width: 100%; height: 500px;"></div>

<fieldset id="form">
   <p>
    <input class="checkbox" id="1" name="1" type="checkbox" checked="checked" value="1" />
    <label for="1"><?php echo JText::_('APARTMENT');?></label>
    </p>
    <p>
    <input class="checkbox" id="2" name="2" type="checkbox" checked="checked" value="2" />
    <label for="2"><?php echo JText::_('ROOM');?></label>
    </p>
    <p>
    <input class="checkbox" id="3" name="3" type="checkbox" checked="checked" value="3" />
    <label for="3"><?php echo JText::_('HOUSE');?></label>
    </p>
    <p>
    <input class="checkbox" id="4" name="4" type="checkbox" checked="checked" value="4" />
    <label for="4"><?php echo JText::_('HOTEL');?></label>
    </p>

</fieldset>

<script src="http://maps.google.com/maps/api/js?sensor=false&language=<?php echo $thisLang;?>" type="text/javascript"></script>
<script type="text/javascript" src="modules/mod_prop_map/tmpl/markerclusterer.js"></script>

    <script type="text/javascript">


    var contentInfoWindow=new Array();
    <?php
        for($x=0;$x<count($list);$x++)
            {
            echo "\n"."contentInfoWindow[".$x."]='".getHtmlInfoWindow($list[$x])."';"."\n";
            }
        ?>



 var markers = new Array();
    var locations = [
     <?php
        for($x=0;$x<count($list);$x++)
            {
            $product = $list[$x];
            echo "['".$product->name."',".$product->type.",".$product->lat.",".$product->lng.",".$x."],"."\n";
            }
        ?>
    ];



var mcOptions =
    {
        gridSize: 50//, maxZoom: 6
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: <?php echo $MapDistance;?>,
          scrollwheel: true,
      center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $lng;?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


var markerCluster = null;   // Initializes markerCluster
    var markers = []; 
    var marker, i;

    for (var i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        icon: '<?php echo JURI::base()?>components/com_properties/includes/img/map_'+locations[i][1]+'_marker.png'

      });


        markers.push(marker);
        map.setCenter(marker.getPosition());    





var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() {


infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          //zIndex: locations[i][1]
        }
      })(marker, i));
    }

var markerCluster = new MarkerClusterer(map, markers);


    // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(type) {
        for (var i=0; i<locations.length; i++) {
          if (locations[i][1] == type) {
            markers[i].setVisible(true);
          }
        }
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(type) {
        for (var i=0; i<locations.length; i++) {
          if (locations[i][1] == type) {
            markers[i].setVisible(false);
          }
        }
      }



         (function($){

      // == show or hide the categories initially ==


        $(".checkbox").click(function(){
            var types = $(this).attr("value");

            // If checked
            if ($(this).is(":checked"))
            {
                show(types);
            }
            else
            {
                hide(types);
            }
          });
         })(jQuery);

</script>