0

Googleマップに約3000個のマーカーが配布されているプロジェクトがあります。より良いプレゼンテーションのために、MarkerClustererおよびFilteringと一緒にjquery-ui-mapsを使用します。

「マーカーデータ」はJSONファイルを介して読み込まれます。

すべての「infoWindowContent」をJSONファイルに含めると、大きくなります。関数を呼び出して、マーカーIDを使用してファイルをロードし、呼び出されたファイルの結果をコンテンツに設定したいと思います。

これが私が今していることの簡単な例です：

$(function() 
{ 
    $('#map').gmap(
    {
        'disableDefaultUI':false, 
        'zoom': 5,
        'center':'<?=$mylat?>,<?=$mylon?>',
        'callback': function() 
        {
            var tags = [<...GETTING LIST OF AVAILABLE TAGS HERE ... >];
            $.each(tags, function(i, tag) 
            {
                $('#sidebar').append(('<label style="margin-right:5px;display:block;"><input type="checkbox" style="margin-right:3px" value="{0}"/>{1}</label>').format(tag, tag));
            });
            var self = this;
            $.getJSON( '< LOADING JSON FILE )?>', function(data) 
            { 
                $.each( data.markers, function(i, marker) 
                {
                    var tags = marker.tags.split(',');
                    self.addMarker(
                    {
                        'position': new google.maps.LatLng(marker.lat, marker.lon),
                        'icon':marker.icon,
                        'tags':tags
                    })
                    .click(function()
                    {
                        //self.openInfoWindow({ 'content':marker.c}, this); => if supplying Conent in JSON file ... works all right, but JSON file is to BIG

// THIS IS, WHERE I NEED SOME ADVICE ... 
                                         self.openInfoWindow({ 'content':marker.id }, this); 
// I want to load a dynamic content for this ID only, if the marker is clicked and the Info Window will be shown
                    });
                });
                self.set('MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'),
                {
                    'maxZoom':12
                }));
                self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){
                    self.openInfoWindow({'content':'Your current position' }, this);
                });
                $('#sidebar').show();
            });

            $('#sidebar input:checkbox').click(function(e) 
            {
                e.preventDefault;
                $('#map').gmap('closeInfoWindow');
                $('#map').gmap('set', 'bounds', null);
                var filters = [];
                $('#sidebar input:checkbox:checked').each(function(i, checkbox) 
                {
                    filters.push($(checkbox).val());
                });

                if ( filters.length > 0 ) 
                {
                    var markerList=[];
                    var i=1;
                    self.find('markers',{'property':'tags','value': filters,'operator':'AND'}, function(marker, isFound)  
                    {
                        if(isFound)
                        {
                            markerList.push(marker);
                            i=i+1;
                        }
                    });
                    var filterInfo = filters.join(' && ');
                    $('#result_selection').html("Current Filter: " + filterInfo + " => Results: " + (i-1));
                    console.log("Current Filter: " + filterInfo + " => Results: " + (i-1));
                    self.get('MarkerClusterer').clearMarkers();
                    self.get('MarkerClusterer').addMarkers(markerList);
                    self.get('MarkerClusterer').redraw_();
                } 
                else 
                {
                    self.get('MarkerClusterer').clearMarkers();
                    $('#result_selection').html('No Filter applied!');

                    $('#map').gmap('set','MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'),
                    {
                        'maxZoom':12
                    }));
                }
                self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){
                self.openInfoWindow({'content':'Your Position' }, this);
                });
            });
            return false;
        }
    });
});

私はこの解決策を見つけましたが、これを上記のスクリプトにどのように含めることができますか？ Google Maps V3：AJAXを介したinfowindowコンテンツの読み込み

ありがとうございました！

キリスト教徒

4

1 に答える 1

2

OK..それを理解しました..。

どこを目指すかがわかれば、基本的には簡単です。

マーカーを追加した後、「リスナー」（ここではclick（）関数）を適応させ、ajaxを介して動的データを取得します。

上記のスクリプトの内部：

                self.addMarker(
                {
                    'position': new google.maps.LatLng(marker.la, marker.lo),
                    'icon':mico,
                    'tags':tags
                    //, 'bounds': true 
                })
                .click(function()
                {
                    var content = load_content(marker.f);
                    self.openInfoWindow({ 'content': content}, this);
                });

そして、Ajaxを介してロードされたデータを取得し、データを返す関数は次のとおりです。

function load_content(id){
    var html = $.ajax({
        url: "/getYourDataHere.php?id="+id,
        async: false}).responseText;
    return html;
}

多分これはそのような解決策を探している誰かを助けるでしょう。

于 2012-09-27T14:13:29.333 に答える