0

我确实有一个项目，在谷歌地图上分布了大约 3000 个标记。我将 jquery-ui-maps 与 MarkerClusterer 和 Filtering 一起使用以获得更好的演示。

“标记数据”通过 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 加载信息窗口内容

谢谢！

基督教

4

1 回答 1

2

好的..想通了...

基本上它很容易，一旦你知道瞄准哪里。

添加标记后，调整“监听器”（这里是 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 回答