하나의 페이지에 여러 개의 Google API 맵로드를 최적화하는 방법

동일한 페이지에 게시 할 100 개의지도를 가져오고 각 페이지에 일부 마커가 있고지도 당 평균 5 개의 마커가 있습니다. 그러나 페이지를로드 할 때 Google지도가로드되기 전에 1 분 정도가 걸립니다. 다음은 지금 가지고있는 코드입니다. 맵을 로더에 빨리 전달하는 방법을 모르겠습니다.하나의 페이지에 여러 개의 Google API 맵로드를 최적화하는 방법

window.onload = function() { 
     initialize(); 
       } 
      var coords = [ 
      {lat: 40.88589, lng: -73.892110, zoom: 10} 
     ]; 
    var maps = []; 

    var markers = [ 
     MARKER DATA IN HERE  

    ]; 

    var counter=100; 

    function initialize() { 
for(var i = 0, length = counter; i < length; i++) 
{ 
    var point = coords; 
    var latlng = new google.maps.LatLng(point.lat, point.lng); 

    maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), { 
     zoom: point.zoom, 
     center: latlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 

    });  
var infoWindow = new google.maps.InfoWindow(); 




    for (var j = 0; j < markers.length; j++) { 
     var data = markers[j]; 
     if(data.Rank==(i+1)){ 
     var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: maps[i], 
      title: data.officer 
     }); 

     //Attach click event to the marker. 
     (function (marker, data) { 
      google.maps.event.addListener(marker, "click", function (e) { 
       //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
       infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.officer + "</div>"); 
       infoWindow.open(maps[i], marker); 
      }); 
     })(marker, data); 
     } 
    } 

    }

}

출처

2016-09-28 John Katt

내 장점은 100 점입니까? 당신이하는 일과 상관없이 잠재적 인 UX의 악몽이 될 것입니다. –

그것은 꽤 간단한 페이지입니다. 다른 식별자를 가진 하나의 맵. –

사용자가 어떻게 특정지도를 빠르게 탐색하거나 찾을 계획입니까? 나는 너를 도울 수 있도록 이것을 이해하려고 노력하고있다. –

~ 100 개 자바 스크립트지도를 초기화하는 느린/너무 비효율적 인 경우에, 나는 마커를 표시하지만, 동적없는 정적 인 이미지를 [1] 정적지도 API에서 시작하여로드하려고 할 것 페이지 로딩 속도를 빠르게 높일 수 있습니다.

비동기 적으로 사용자가 이러한지도 중 하나와 상호 작용할 준비가 된 것을 감지하면 정적지도를 동적 JavaScript지도로 바꿀 수 있습니다.

사용자가 볼 수있는지도 만 더 영리하게로드 할 수 있습니다. 한 번에 상위 20 개의지도 만보고 나머지는 스크롤해야합니다. 첫 번째 ~ 40 개의지도를로드하는 것이 좋습니다. 사용자가 스크롤 할 때 콘텐츠가 표시되지만로드하는 데 시간을 낭비하지 않아도됩니다. 박쥐 바로 100지도.

[1] https://developers.google.com/maps/documentation/static-maps/intro

출처

2016-09-29 03:09:18 bamnet

하나의 페이지에 여러 개의 Google API 맵로드를 최적화하는 방법

답변

관련 문제