Google Maps API V3在添加大量標記時速度很慢

我需要在Google地圖上呈現多個標記和markerclusterer。我目前正在使用API（v3），並且在較慢的機器上存在性能問題。我該怎麼做？我使用ajax和XMLGoogle Maps API V3在添加大量標記時速度很慢

來源

2014-02-05 Koukouan

This is a known issue with gmap。現在，按照at this link提到的批量添加到DOM的建議。

請注意，有些方法可以批量添加標記，包括MarkerLight和MultiMarker，這些標記可能足夠快，無需直接DOM操作即可滿足您的需求。

來源

2014-02-05 15:11:24 bishop

偉大的，如果它爲你工作，記得投票和接受。如果不是，請評論你還需要什麼。歡迎來到SO。 – bishop

我沒有使用Markerclusterer，但我確保只有視口中的標記在地圖上設置。對我來說，這在性能上有了顯着的提升。

我使用了多個充當不同圖層的標記陣列。這些圖層通過在創建後添加marker.display屬性進行控制，以便以後使用。這樣，即使在視口內，這些也將被忽略。

使用「空閒」事件：當用戶停止平移/縮放時，「空閒」將觸發，而不是在平移/縮放時持續點亮的「bounds_changed」事件。

將事件添加到您的window.onload函數中。有關API（*）

 google.maps.event.addListener(map, "idle", function (event) { 
      if (map) { 
       //This is the current user-viewable region of the map 
       var bounds = map.getBounds(); 
       markerLayers.forEach(function (layer) { 
       checkVisibleElements(layer, bounds); 
       }); 
       checkVisibleElements(searchMarkers, bounds); 
       //Loop through all the items that are available to be placed on the map 
      } 
     }); 


    function checkVisibleElements(elementsArray, bounds) { 
     //checks if marker is within viewport and displays the marker accordingly - triggered by google.maps.event "idle" on the map Object 
     elementsArray.forEach(function (item) { 
      //If the item is within the the bounds of the viewport 
      if (bounds.contains(item.position) && item.display == true) { 
       //If the item isn't already being displayed 
       if (item.map!=map){ 
       item.setMap(map); 
       } 
      } else { 
       item.setMap(null); 
      } 
     }); 
    }

更多信息：Google Maps API : To Many Markers!

（*）original link dead, archived version from archive.org

來源

2015-08-12 11:01:20

如果您的自定義標記使用的路徑，嘗試使用URL的圖像（如SVG），而不是。路徑渲染速度很慢，但（共享）圖標要快得多。

來源

2018-02-14 15:44:05 ZephDavies

Google Maps API V3在添加大量標記時速度很慢

回答

相關問題