GoogleマップJS API V3複数のマーカーレンダリング

Question

Googleマップに2000マーカーを読み込む際のパフォーマンスの問題が残っています。この質問は概要ですが、多くの場所で見つけることができますが、それでも私の問題を理解することはできません。

したがって、短くて問題があります： Googleマップの初期化でブラウザが10-20秒間ぶら下がっています。

設定：バックエンドからのデータを単一のget要求で受信し

• マーカー。 0.3秒でロードされる。
• マーカー・クラスタリング（https://googlemaps.github.io/js-marker-clusterer/docs/examples.html）ライブラリーが使用される。 しかし、それがあってもなくても、ブラウザはまだ同じ時間にぶら下がっています。
• マーカーは豊富です。カスタム写真、情報ウィンドウ、イベントなどがあります。
• 情報ウィンドウはAngularJSディレクティブとして

マーカーセットアップコード設定されています

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); 
} 

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 

が、私は取得した後これはconsole.outで、ブラウザは10〜20秒ほど掛かっていますマーカー付き地図を表示しています。

更新：問題は、AngularJSバインディング処理（インフォ・イン・ディレクティブ）にあります。どのようにそれに対処する任意のアイデア？

Answer 1

ソリューション：clickイベントリスナーの内部にAngularJS指示の初期化を挿入します。

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

私は角度を使用していないので、私はそれを手伝ってくれません。しかし、一般的なルールとして、サーバー側のクラスタリングに時間を費やすことをお勧めします。そして、あなたが言及した豊かな環境をすべてロードするのを避けてください。いくつかの作業が必要ですが、アプリケーションでマーカーの数を増やす計画がある場合は、後でそれを理解してください。クラスタリングアルゴリズムの場合、私はこのStackOverflowリファレンスがあなたに役立つことを願っています。
Server-side clustering for google maps api v3