如何優化在一個頁面上加載多個Google API地圖

我正在帶100張地圖在同一頁上發佈，每頁上有一些標記，每個地圖平均有5個標記。但是，當加載該頁面時，需要在谷歌地圖加載前一分鐘左右。這裏是我現在的代碼，我只是不確定如何更快地將地圖加載到加載器。如何優化在一個頁面上加載多個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個地圖爲什麼？無論你做什麼，這都將是潛在的用戶體驗噩夢。 –

它是一個非常簡單的頁面，只是一個地圖在另一個之後與不同的標識符。 –

您打算如何快速導航或定位特定地圖？我想了解這一點，所以我可以幫助你。 –

如果初始化〜100張的JavaScript地圖是效率太低/慢，我會嘗試先從靜態地圖API [1]，其裝載顯示標誌，但不是動態的靜態圖像快速呈現頁面加載的外觀。

異步，也許當您檢測到用戶正準備與這些地圖之一進行交互時，可以用動態JavaScript地圖替換靜態地圖。

你甚至可以變得更聰明，只加載用戶可見的地圖。如果您一次只能看到前20幅地圖，並且用戶必須滾動才能看到其他地圖，則加載第一批〜40幅地圖纔有意義，因此用戶滾動時會有內容，但不會浪費時間。 100蝙蝠的地圖。

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

來源

2016-09-29 03:09:18 bamnet

如何優化在一個頁面上加載多個Google API地圖

回答

相關問題