Google Maps是否按多個區域（多邊形）過濾？

Question

我正在使用一張地圖，在該地圖中，我有興趣選擇多個區域，當選擇了這些區域時，僅顯示這些區域的圖釘。 本質上，該站點當前已設置了“標簽”，因此，當您單擊某個區域時，相應的標簽將顯示在過濾器下方。 添加過濾器后，將比較每個標記，如果該標記不在某個區域，則將標記刪除。 當前，當選擇一個下拉項目並將該項目與每個標記的多邊形區域進行比較時，地圖可以正常運行。 但是，當您為每個標簽添加另一個循環時，過濾將不再起作用。 以下是我的代碼，網站鏈接位於http://swishercorbett.com.test.marketmagnitude.com/listings/?map=1

    var DistrictVal = jQuery('#District').val(); 
    var baths = jQuery('#baths').val();
    var bedrooms = jQuery('#bedrooms').val(); 
    //var amount = jQuery('listings_per_page')

    var minprice = jQuery('#minPriceB').val();
    var maxprice = jQuery('#maxPriceB').val();

    jQuery('#loading').show(); //show the loading icon on start before a selection is made 
/*     ===================================================================================================================*/ 

    var stopIt = [];
    var bad; 

    var DistrictLen = jQuery('#District option').length; // determine how many items there are 
    for(var i = 0; i <= DistrictLen; i++) //loop through each item in the drop down 
    {
        var optionText = jQuery('#District option').eq(i).text(); //get the text and put in variable 
    }

    //loop through each filter tag added
    // if the filter tag matches drop down selection
    // make sure not to add the new tag

    var districtTags = jQuery('#districtTags #districtTag')
    var tagLength = districtTags.length; 

    for (var z = 0; z <= tagLength; z++)
    {
        if (districtTags.eq(z).text() == DistrictVal)
        {
            stopIt.push(1); //there is a match 
        }
        else{
            stopIt.push(0);  // there is not a match 
        }
    }
    var bad = jQuery.inArray(1, stopIt); 
    if (bad == -1)
    {
        jQuery('#districtTags').append('<div id="tag"><div id="districtTag">'+DistrictVal+'</div><span id="remove-tag"> X</span></div>');
        tags.push(DistrictVal); //get all of the tags and send them to mapChange() which is in jGMap.js 
        //console.log(tags);
    }
    jQuery('#remove-tag').live('click',function()
    {
    jQuery(this).parent().empty();
    tags = [];

    }); 
/* ===================================================================================================================*/        

//New Ajax request indepentant from the below Ajax request which 
// is only used to retrieve listings by location

    infoWindow = new google.maps.InfoWindow({size: new google.maps.Size(150, 100)});
    var mapOptions = {
        center: new google.maps.LatLng(39.977735,-86.141566),
        zoom: 11,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas-listing"), mapOptions);
    geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, infowindow: infoWindow});
    geoXml.parse('/wp-content/themes/swishercorbett/js/SC Map.kml');
    /* ================================================================================ */  

    //Adds inforation to the database with the address and the latitude and longitude
    jQuery.ajax({
            async: 'false',
            url: 'http://swishercorbett.com.test.marketmagnitude.com/wp-content/plugins/john-    real-estate/mapinformation.php', //not a real page 
            type: 'GET',
            dataType: 'json',
            data: {jbaths: baths, jbedrooms: bedrooms, jminprice: minprice, jmaxprice: maxprice},
            //data: {jaddr: addr, jlat: lat, jlon: lon}, //uncomment after use! 
            success: function(e)
            { // get each address 
                jQuery(e).each(function(index) 
                {
                    // e[0] is first item repeated over itself 
                        var text = e[index][0]; //get the address of each listing 
                        //console.log(text);
                        var cords = e[index][1].split(','); //get the latitude and longitude and spit
                        var lat = parseFloat(cords[0]); //latitude with decimal points
                        var lon = parseFloat(cords[1]); // longitude with decimal points 

                        infowindow = new google.maps.InfoWindow();
                        marker = new google.maps.Marker( //add a new marker for each item in JSON array 
                        {
                            position: new google.maps.LatLng(lat, lon), // create a new position
                            map: map // add the position to the map 
                        });

                    /* ============================================================================ */  
                      for(var i = 0; i<geoXml.docs[0].gpolygons.length; i++ )
                      {
                        // if any of the tags match show those districts, remove the rest
                        for( var z = 0; z<= tags.length; z++)
                        {
                             if( geoXml.docs[0].placemarks[i].name == tags[z] ) //DistricVal 
                             {
                                if (geoXml.docs[0].gpolygons[i].Contains(marker.getPosition()) ) 
                                 { //if the marker is in the first quadriant then keep it, else remove the marker from the map
                                    marker.setMap(map);
                                    setTimeout(function(){ jQuery('#loading').hide();   }, 500); 
                                 }
                                  else
                                  {
                                    marker.setVisible(false);
                                    //console.log('does not contain');
                                  }
                             }
                             else
                             {
                                //alert('there is not a kml region with that name')
                             }
                         }
                      }
                    /* ============================================================================ */   
                        //console.log(google.maps.geometry.poly.containsLocation(cords, Midtown)); 
                        google.maps.event.addListener(marker, 'click', (function(marker, index) 
                        {
                            return function() 
                            {
                                infowindow.close(map,marker);
                                infowindow.setContent(e[index][0]);
                                infowindow.open(map, marker);
                            }
                        })(marker, index));
                });
            }
        }).done(function(){
            jQuery('#loading').hide();
        });

Answer 1

使用此庫來管理標記聚類，這將有助於優化地圖視圖（ 此答案應有助於集成）。

另外，代碼段中的代碼通常可以很好地與過濾一起使用。 您可以嘗試一下。 可能會解決問題。

 // Get all markers from the php document markers.php ( output simulates json object ) $('#map-canvas').gmap().bind('init', function(evt, map) { $.getJSON( 'http://example.php', function(data) { $.each( data.markers, function(i, marker) { $('#map-canvas').gmap('addMarker', {'tags': marker.tags, 'position': new google.maps.LatLng(marker.latitude, marker.longitude),'bounds': true}).click(function() { // Declares what you want to show in the info window when marker is clicked $('#map-canvas').gmap('openInfoWindow', { 'content': '<strong>' + marker.title + '</strong><br/>' + marker.address + '<br/>' + marker.phone + '<br/><br/>' + marker.tags }, this); }); // Filter map $('#map-canvas').gmap('find', 'markers', { 'property': 'tags', 'value': ['baths', 'bedrooms', 'minprice', 'maxprice'], 'operator':'AND' }, function(marker, isFound) { if ( isFound ) { marker.setVisible(true); } else { marker.setVisible(false); } }); }); }); }); // End map function