我正在使用一张地图，我感兴趣的是选择了多个地区，当选择了这些地区时，他们只显示那些地区的地图。从本质上讲，该网站目前有＃34;标签＆＃34;设置为当您单击某个区域时，相应的标记将显示在过滤器下方。添加过滤器后，将比较每个标记，如果该标记不在区域中，则删除标记。目前，在选择下拉项目并将此项目与每个标记的多边形区域进行比较时，地图正在运行。但是，当您为每个标记添加另一个循环时，过滤不再起作用。以下是我的代码，网站链接位于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();
});
答案 0 :(得分：0)
使用此library来管理标记群集，这有助于优化地图视图（this答案应该有助于整合）。
此外，代码段中的代码通常也适用于过滤。你可以尝试一下。可能只是这样做。
// 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