Google मानचित्र API v3 चेकबॉक्स / फ़िल्टर डेटाबेस

आपकी समस्या का समाधान दिखाने के लिए मैं jQuery का उपयोग करता हूं। मैं एक बार सभी मार्करों को पढ़ता और आकर्षित करता हूं। जब कोई फ़िल्टर लागू किया जाता है (चेकबॉक्स को अनचेक करें) मार्कर की दृश्यता बदल जाती है।

पहले मार्कर बिंदुओं और गुणों के साथ एक सरणी बनाएं जैसे:

var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};

जब आप मानचित्र पर मार्कर बनाते हैं तो इस सरणी को पुनरावृत्त करें। ऐसा करते समय अपने मार्करों के संदर्भों के साथ दूसरी सरणी और पहली सरणी के समान अनुक्रमणिका बनाएं:

$.each(markers, function(index, m) {


  markersmap[index] = new google.maps.Marker({
  position: new google.maps.LatLng(m.long,m.lat),
  map: map

  });   

});

जब आपके फ़िल्टर बदलते हैं तो पहले सरणी को फिर से चालू करें। अपने फ़िल्टर जांचें और मार्करों की दृश्यता को बदलने के लिए दूसरी सरणी का उपयोग करें।

प्रत्येक फ़िल्टर के लिए आप कुछ इस तरह उपयोग कर सकते हैं:

    $("input[name=stars]:checkbox").bind( "change", function() {

        var typevalue = $(this).val();
        var typechecked = $(this).is(':checked')
        $.each(markers, function(index, m) 
        {

                if(m.stars===parseInt(typevalue))
                {
                    if(typechecked) 
                    {
                        markersmap[index].setVisible(true);
                    } 
                    else
                    {
                        markersmap[index].setVisible(false);
                    }   
                }
        });
    });

यहां समस्या यह है कि जब कोई अन्य फ़िल्टर चालू (अनचेक) होता है तो आप मार्कर नहीं दिखाना चाहते हैं। इस परिवर्तन को हल करने के लिए if(typechecked) करने के लिए अगर (टाइपचेक &&$("इनपुट:चेकबॉक्स [नाम ='प्रकार'] [मान ='"+ एम. . यदि आपके पास बहुत सारे फ़िल्टर हैं तो यह जटिल हो जाता है। तो इस कोड को इस पर रिफलेक्टर करें:

 $("input:checkbox").bind( "change", function() 
{
    $.each(markers, function(index, m) 
    {
        if(
        $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
        $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')
        )
        {
            markersmap[index].setVisible(true);
        } 
        else
        {
            markersmap[index].setVisible(false);
        }
    })  
});
 
 मुझे 100% यकीन नहीं है कि यह भी ठीक हो जाता है:"मेरे मामले में, थिएटर सिर्फ एक और फिल्टर होगा और गोल्फ कोर्स को ओवरलैप कर सकता है। शायद इस उदाहरण में एक मार्कर पहाड़ और रेगिस्तान हो सकता है? यदि ऐसा है तो आप अपनी पॉपर्टीज़ की सरणी बना सकते हैं जैसे:
 markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
 
 इस मामले में अपना चेक इसमें बदलें:
     if(
    $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
    (
    ($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
    ($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
    )
    )
 
 उदाहरण:
 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Markers example</title>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {

  width: 500px;
  height: 300px;
}


</style>    
  </head>
  <body>
<div id="map-canvas"></div>

<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="mountains" checked="checked"/>Mountains<br />
<input type="checkbox" name="type" value="desert" checked="checked"/>Desert<br />
</div> 

<div style="float:left;">Stars:<br />
<input type="checkbox" name="stars" value="1" checked="checked"/>1<br />
<input type="checkbox" name="stars" value="2" checked="checked"/>2<br />
<input type="checkbox" name="stars" value="3" checked="checked"/>3<br />
</div>   

<br />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
    <script>

var markersmap = [];
var markers = [];       

function initialize() {


markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
markers[1] = {long:-26.363882,lat:132.044922,'type':['mountains'],stars:1};
markers[2] = {long:-27.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[3] = {long:-28.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[4] = {long:-25.363882,lat:130.044922,'type':['desert'],stars:1};
markers[5] = {long:-26.363882,lat:130.044922,'type':['desert'],stars:2};
markers[6] = {long:-27.363882,lat:130.044922,'type':['desert'],stars:3};
markers[7] = {long:-28.363882,lat:130.044922,'type':['desert'],stars:3};

  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882,131.044922),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



$.each(markers, function(index, m) {


      markersmap[index] = new google.maps.Marker({
      position: new google.maps.LatLng(m.long,m.lat),
      map: map

      });   

  });

}
google.maps.event.addDomListener(window, 'load', initialize);

$("input:checkbox").bind( "change", function() 
{
    $.each(markers, function(index, m) 
    {
        if(
        $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
        (
        ($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
        ($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
        )
        )
        {
            markersmap[index].setVisible(true);
        } 
        else
        {
            markersmap[index].setVisible(false);
        }
    })  
});

</script>    


  </body>


</html>