Google मानचित्र मार्कर समूह

मैं निम्नलिखित बातों को प्राप्त करने की कोशिश कर रहा हूं: उदाहरण के लिए, मेरे स्कूल पर विभिन्न प्रकार के मार्कर हैं उदाहरण के लिए, स्कूल, पुस्तकालय, बस स्टॉप और मैं मार्करों के प्रत्येक समूह को दिखाने/छिपाने में सक्षम होना चाहता हूं।Google मानचित्र मार्कर समूह

मैं थोड़ी देर लेकिन कुछ नहीं के लिए गूगल खोज रहे होते आया:/

कोई भी विचार है कि यह कैसे प्राप्त किया जा सकता?

स्रोत

2010-07-10 Aviatrix

समुद्र तट कोड इस फिक्स के साथ काम करता है: स्थिति: नया google.maps.LatLng (समुद्र तट [i] [1], समुद्र तट [i] [2]), – dalton

मैंने ऐसा कुछ नहीं किया (मार्कर दिखा रहा/छुपा रहा है) इसलिए मैं एक उदाहरण के लिए एक लिंक पोस्ट कर सकता हूं http://econym.org.uk/gmap/example_categories.htm – robertbasic

इससे निपटने के कई तरीके हैं, लेकिन मुझे आपको एक दृष्टिकोण दिखाने दो।

सबसे पहले, के स्थानों की एक सरणी (Google Maps API Tutorials से उधार) के साथ शुरू करते हैं:

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
];

यह वास्तव में सरणियों की एक सरणी है। यह 5 ऑस्ट्रेलियाई समुद्र तटों का प्रतिनिधित्व करता है, और हमारे पास नाम, अक्षांश, देशांतर और श्रेणी है। इस मामले में श्रेणी सादगी के लिए सिर्फ एक संख्या है।

फिर यह महत्वपूर्ण है कि हम उन मार्करों का संदर्भ रखें जो हम बनाते हैं। ऐसा करने के लिए, हम एक markers सरणी जहां हम एक नए मार्कर की दुकान का उपयोग कर सकते हैं, और हम भी अपनी श्रेणी आईडी के साथ प्रत्येक मार्कर वस्तु को बढ़ाने कर सकते हैं:

var markers = []; 

var i, newMarker; 

for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
    map: map, 
    title: beaches[i][0] 
    });  

    newMarker.category = beaches[i][3];  
    newMarker.setVisible(false); 

    markers.push(newMarker); 
}

अंत में, जब हम मार्करों दिखाने की जरूरत है, हम बस कर सकते हैं markers सरणी पर फिर से शुरू करें, और setVisible() विधि को किस श्रेणी के अनुसार हम दिखाना चाहते हैं, उसके अनुसार कॉल करें।

आप निम्न पूर्ण उदाहरण की जाँच कर सकते हैं: ऊपर के उदाहरण से

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 300px;"></div> 

    <input type="button" value="Show Group 1" onclick="displayMarkers(1);"> 
    <input type="button" value="Show Group 2" onclick="displayMarkers(2);"> 

    <script type="text/javascript"> 

    var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.88, 151.28), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 

    var i, newMarker; 

    for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
     map: map, 
     title: beaches[i][0] 
    }); 

    newMarker.category = beaches[i][3]; 
    newMarker.setVisible(false); 

    markers.push(newMarker); 
    } 

    function displayMarkers(category) { 
    var i; 

    for (i = 0; i < markers.length; i++) { 
     if (markers[i].category === category) { 
     markers[i].setVisible(true); 
     } 
     else { 
     markers[i].setVisible(false); 
     } 
    } 
    } 

    </script> 
</body> 
</html>

स्क्रीनशॉट, "शो समूह 2" बटन पर क्लिक करने के बाद:

Google Maps JavaScript API v3 Example: Marker Categories http://img535.imageshack.us/img535/8485/markercat.jpg

स्रोत

2010-07-10 14:36:34

अच्छा ट्यूटोरियल! धन्यवाद ! लेकिन आपके डिस्प्ले मार्कर फ़ंक्शन में एक छेद है :) यदि हम फ़ंक्शन का उपयोग/छुपाने के लिए करते हैं तो हमें यह जांचना होगा कि मार्कर इसे पहले से छुपा/दिखाया गया है या इसे छुपाने के लिए दिखाया गया है;) (var i = 0 ; मैं Aviatrix

@Aviatrix: उदाहरण में मेरा दृष्टिकोण उन सभी मार्करों को छिपाना था जो श्रेणी तर्क से मेल नहीं खाते हैं। यह 'else {markers [i] .setVisible (false) में हुआ; } 'भाग। इसका मतलब यह है कि कभी-कभी 'सेट विज़िबल (झूठा)' को मार्करों के लिए बुलाया जाता है जो पहले ही छिपे हुए हैं। मुझे लगता है कि मैप्स एपीआई मार्कर के राज्य को आंतरिक रूप से जांचता है।यही कारण है कि मैं 'getVisible()' के साथ दृश्यता की जांच नहीं कर रहा था ... जाहिर है, आपका दृष्टिकोण उतना ही अच्छा है। पोस्ट कोड में –

निश्चित टाइपो ([काम कर रहे उदाहरण] (http://www.geocodezip.com/v3_SO_toggleCategories.html)) – geocodezip

आप मूल रूप से बस एक सरणी में मार्कर ऑब्जेक्ट्स के संदर्भों को स्टोर करने की आवश्यकता है, अपने प्रकार (स्कूल, बस स्टॉप इत्यादि) सेट करें और फिर कुछ इवेंट लूप के माध्यम से और छुपाएं/उपयुक्त के रूप में दिखाएं:

var markers = []; 

// create Marker 

marker.locType = 'school'; //as appropriate 

function hideMarkersOfType(type) { 
    var i = markers.length; 
    while(i--) { 
     if (markers[i].locType == type) { 
      markers[i].setVisible(false); 
     } 
    } 
} 

// similar function showMarkersOfType() calling markers[i].setVisible(true);

वैसे भी यह एक अच्छी शुरुआत होनी चाहिए।

स्रोत

2010-07-10 14:36:58

को छोड़कर 'markers.setMap (शून्य) का उपयोग करना बेहतर होगा; इस तरह नक्शा बेहतर प्रदर्शन करता है। – tim

Google मानचित्र मार्कर समूह

उत्तर

संबंधित मुद्दे