Google मानचित्र V3: केवल व्यूपोर्ट में मार्कर दिखाएं - साफ़ मार्कर समस्या

Question

मुझे Google मानचित्र के साथ एक नक्शा बनाना पसंद है जो बड़ी मात्रा में मार्कर (10.000 से अधिक) को संभाल सकता है। मानचित्र को धीमा करने के लिए मैंने एक एक्सएमएल-फाइल बनाई है जो वर्तमान व्यूपोर्ट के अंदर मौजूद मार्करों को आउटपुट करता है।

पहले, मैं सेटअप करने के लिए प्रारंभ() मानचित्र विकल्पों का उपयोग:

function initialize() { 
    var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125); 
    var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.addListener(map, 'tilesloaded', function() { 
    loadMapFromCurrentBounds(map); 
    }); 
} 

जब घटना 'tilesloaded' समाप्त हो गया है, मैं loadMapFromCurrentBounds(), यह काम करता है वर्तमान सीमा मिल जाएगा का उपयोग करें और एक अनुरोध भेजता है

function loadMapFromCurrentBounds(map) { 

    // First, determine the map bounds 
    var bounds = map.getBounds(); 

    // Then the points 
    var swPoint = bounds.getSouthWest(); 
    var nePoint = bounds.getNorthEast(); 

    // Now, each individual coordinate 
    var swLat = swPoint.lat(); 
    var swLng = swPoint.lng(); 
    var neLat = nePoint.lat(); 
    var neLng = nePoint.lng(); 

    downloadUrl("mapsxml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) { 
     var xml = parseXml(data); 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     var infoWindow = new google.maps.InfoWindow; 

     for (var i = 0; i < markers.length; i++) { 
      var address = markers[i].getAttribute("address"); 
      var type = markers[i].getAttribute("type"); 
      var name = markers[i].getAttribute("name"); 

      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng")) 
      ); 

      var html = "<b>" + name + "</b> <br/>" + address; 
      var icon = customIcons[type] || {}; 

      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow}); 

      bindInfoWindow(marker, map, infoWindow, html); 
     } 
    }) 
} 

यह महान है, तथापि, वर्तमान कोड ऑफलोड नहीं करता मार्करों कि डी व्यूपोर्ट में अब और नहीं कर रहे हैं काम कर रहा है: एक्सएमएल फाइल करने के लिए मार्कर कि वर्तमान व्यूपोर्ट के अंदर हैं दिखाने के लिए। इसके अलावा, यह मार्करों को फिर से लोड करता है जो पहले ही लोड हो चुके हैं, जो नक्शा को उसी क्षेत्र में एक दृश्य समय को स्थानांतरित करते समय मानचित्र को धीमा कर देता है।

तो जब व्यूपोर्ट बदलता है, तो मैं नए मार्कर लोड करने से पहले पूरे मानचित्र को साफ़ करना चाहता हूं। इसे करने का बेहतरीन तरीका क्या है?

Answer 1

आप मानचित्र के लिए एक और घटना श्रोता जोड़ने की जरूरत:

google.maps.event.addListener(map,'bounds_changed', removeMarkers); 

एक गूगल मानचित्र से सभी मार्करों को दूर करने के बारे में अधिक के लिए here देखें - दुर्भाग्य से मुझे लगता है कि यह एक कॉल के साथ किया जा सकता है नहीं है। तो तुम इतनी तरह अलग-अलग removeMarkers या कुछ इसी तरह जो उन्हें हटाने के नक्शे पर सभी मार्करों के माध्यम से पुनरावृति करना होगा लिखने के लिए करना होगा:

markersArray[i].setMap(null); 

मैं चाहे वह करता है, तो मार्कर है की जाँच करने के जल्दी नहीं जानता व्यूपोर्ट में उपयोग करके निकालने से पहले:

map.getBounds(); 

Read more about Google Map API v3 events

Answer 2

आप इस सूत्र की जाँच कर सकते हैं। डैनियल ने काफी अच्छी तरह उत्तर दिया।

What's the most efficient way to create routes on google maps from gps files?

इसके अलावा, bounds_changed अपने समारोह कॉल करने के लिए पहला अवसर है। tilesloaded, लगातार कहा जाएगा। व्यूपोर्ट में व्यूपोर्ट भरने के लिए एक से अधिक टाइल हो सकते हैं।

वैकल्पिक रूप से, आप एक सेट दृश्य (झूठा) भी कर सकते हैं।

मार्कर को हटाने के लिए, आपको श्रोताओं को हटाने की आवश्यकता हो सकती है।

google.maps.event.clearInstanceListeners(marker); 
marker.setMap(null); 
markers.remove(marker); 
delete marker; 

Answer 3

इस लेख के माध्यम से यह बहुत अच्छी तरह से चला जाता है: Dynamically loading thousands of markers in Google Maps

• गतिशील मार्करों लोड जब तक हम एक सीमा
• तक पहुँचने कि पहले से ही के बाद
• जोड़ दिया गया है मार्करों के एक hashtable रखने सीमा पर पहुँच गया है, मार्कर है कि वर्तमान में व्यूपोर्ट में नहीं हैं को दूर
जब उपयोगकर्ता ज़ूम आउट किया गया है 0
• नक्शे से सभी मार्करों हटाने, और जब तक उपयोगकर्ता एक उचित स्तर

Answer 4

आपका मूल समारोह कोड का एक बहुत की तरह लगता है के लिए वापस ज़ूम कोई भी मार्कर लोड न करें।

if(map.getBounds().contains(markers[i].getPosition())) { 
    myMarkerDisplayFunction(markers[i]); 
} 

Answer 5

आप Google से इस दस्तावेज़ की जाँच करने के लिए चाहते हो सकता है: मैं कुछ इस तरह करते हैं चाहते हैं।

With the new list of markers you can remove the current markers 
(marker.setMap(null)) that are on the map and 
add the new ones (marker.setMap(map)). 

Answer 6

निम्नलिखित विवरण के कारण का उपयोग कर 'tilesloaded' या 'bounds_changed' बहुत गलत हो सकता है और अनिच्छुक निरंतर फायरिंग का कारण होता है: यह है कि तुम क्या जरूरत बताते हैं। इसके बजाय आप 'निष्क्रिय' ईवेंट का उपयोग करना चाहेंगे जो उपयोगकर्ता द्वारा पैनिंग/ज़ूमिंग बंद करने के बाद आग लग जाएगी।

google.maps.event.addListener (नक्शा, 'निष्क्रिय', loadMapFromCurrentBounds);

https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement