Google Maps JS API V3 mehrere Marker Rendering

Question

Ich bin mit dem Performance-Problem fest, das Laden von 2000 Markierungen auf Google-Karte. Diese Frage ist eine Übersicht kann an vielen Orten gefunden werden, aber immer noch, kann das Problem für mich nicht herausfinden.

So, das Problem in Kürze: Google Map-Initialisierung hängt den Browser für 10-20 Sekunden.

Rahmen:

• Die Marker Daten aus Back-End empfangen in einem einzigen get Anfrage. geladen in 0.3 sec
• Marker Clusterer (https://googlemaps.github.io/js-marker-clusterer/docs/examples.html) Bibliothek wird verwendet. Allerdings mit oder ohne der Browser immer noch die gleiche Zeit hängen.
• Die Marker sind reich. mit benutzerdefinierten Bildern, Infofenstern und Ereignissen.
• Infofenster wird als AngularJS Richtlinie Einrichtung

Marker Setup-Code:

function showMarkers(scope,data) { 
    var locations = data; 
    console.log("Starting markers setup: ", new Date()); 
    for(var i = 0; i < locations.length; i++) { 

     var MarkerImage = '/img/reasestate.png'; 
     markers[i] = new google.maps.Marker({ 
      position: {lat:locations[i].latitude, lng:locations[i].longtitude}, 
      map: map, 
      id: locations[i].id, 
      icon: MarkerImage 
     }); 


     var infowindow = new google.maps.InfoWindow(); 
     var contentString = '<infowindow></infowindow>'; 
     var compiled = $compile(contentString)(scope); 

     google.maps.event.addListener(markers[i], 'click', (function(i, scope) { 
      return function(){ 
       scope.placeInfo = null; 

       //for search around 
       scope.condo_LatLng = new google.maps.LatLng(locations[i].latitude,locations[i].longtitude); 

       //update scope 
       scope.$apply(); 

       ////////////////// 
       ///INFOWINDOW SETUP 
       /////////////////// 
       //you can change url to your url . '/maps/api/getcondo?CondoID='+scope.place.id' 
       $http.get('/maps/api/condo/items?CondoID='+locations[i].id).then(function(success) { 
        //a bit of additional received data processing, not important. 
       }, function(error) { 
       }).finally(function() {}) 
      }; 
     })(i, scope, locations[i])); 
    } 
    setClustering(markers); 
    console.log("Finished markers setup: ", new Date()); 

    ///////////// 
    ///context menu 
    //////////// 
    var menuStyle = { 
     menu: 'context_menu' 
     //menuSeparator: 'context_menu_separator', 
     //menuItem: 'context_menu_item' 
    }; 

    var contextMenuOptions = { 
     classNames: menuStyle, 
     menuItems: [ 
      { label:'Add your condo...', id:'menu_option1', 
       className: 'menu_item', eventName:'option1_clicked' }, 
      { label:'Exit', id:'menu_option2', 
       className: 'menu_item', eventName:'option2_clicked' } 
     ], 
     pixelOffset: new google.maps.Point(10, -5), 
     zIndex: 5 
    }; 

    var contextMenu = new ContextMenu(map, contextMenuOptions); 
    google.maps.event.addListener(contextMenu, 'menu_item_selected', 
     function(latLng, eventName, source){ 
      switch(eventName){ 
       case 'option1_clicked': 
        createDraggableMarker(latLng); 
        break; 
       case 'option2_clicked': 
        // do something else 
        break; 
       default: break; 
      } 
     }); 

    google.maps.event.addListener(map, 'rightclick', function(mouseEvent) { 
     contextMenu.show(mouseEvent.latLng, map); 
    }); 
} 

function setClustering(markers){ 
    var mcOptions = {gridSize: 150}; 
    mc = new MarkerClusterer(map,markers, mcOptions); 
} 

das Erste auf Console.Out:

Starting markers setup: Sun Jun 19 2016 16:43:57 
jsAllMain.js:240 Finished markers setup: Sun Jun 19 2016 16:43:57 
jsAllMain.js:256 Show markers method done at: Sun Jun 19 2016 16:43:57 
jsAllMain.js:256 Initialize searchmap done at: Sun Jun 19 2016 16:43:57 

aber nachdem ich bekommen das in console.out, hängt der Browser wie 10-20 Sekunden mehr unti l Es zeigt die Karte mit Markern.

UPDATE: Das Problem ist mit AngularJS Bindungen Verarbeitung (Infowindow Richtlinie). Irgendeine Idee, wie man damit umgeht?

Answer 1

Lösung: Setzen Sie die AngularJS Direktiveninitialisierung innerhalb des click Ereignishörers.

google.maps.event.addListener(markers[i], 'click', (function(i, scope) { 
     return function(){ 
      var infowindow = new google.maps.InfoWindow(); 
      var contentString = '<infowindow></infowindow>'; 
      var compiled = $compile(contentString)(scope); 

      scope.placeInfo = null; 

      //for search around 
      scope.condo_LatLng = new google.maps.LatLng(locations[i].latitude,locations[i].longtitude); 

      //update scope 
      scope.$apply(); 

      ////////////////// 
      ///INFOWINDOW SETUP 
      /////////////////// 
      //you can change url to your url . '/maps/api/getcondo?CondoID='+scope.place.id' 
      $http.get('/maps/api/condo/items?CondoID='+locations[i].id).then(function(success) { 


       //setup infowindow 
       infowindow.close(); 
       infowindow = new google.maps.InfoWindow({ 
        id: markers[i].id, 
        content:compiled[0], 
        position:new google.maps.LatLng(locations[i][1],locations[i][2]) 
       }); 

       //infowindow.setContent(compiled[0]); 
       infowindow.open(map, markers[i]); 

      }, function(error) { 
      }).finally(function() {}) 
     }; 
    })(i, scope, locations[i])); 

Answer 2

Ich benutze noch nicht Angular, also kann ich dir damit nicht helfen. Aber als allgemeine Regel schlage ich vor, etwas von Ihrer Zeit in das Clustering auf der Server-Seite zu investieren, dann vermeiden Sie um jeden Preis die ganze reiche Umgebung zu laden, die Sie erwähnten, machen Sie das Beste aus ihnen können Sie, nur auf Benutzerwunsch verfügbar. Es würde etwas Arbeit benötigen, aber wenn Ihre Anwendung plant, seine Marker-Population zu vergrößern, wird es später zu schätzen wissen. Im Fall des Clustering-Algorithmus fand ich diese StackOverflow-Referenz Hoffnung, die Ihnen helfen könnte.
Server-side clustering for google maps api v3