2014-02-11 54 views
3

我是新來的谷歌地圖,我正在將GPS數據繪製到谷歌地圖上,它可以正常工作到500點。如果數據超過500個,它會減慢速度,還有其他方法可以將標記繪製到地圖上。谷歌地圖加載超過1000個標記瀏覽器沒有響應

我只是在特定的時間段內在Google地圖上標記GPS數據。

後來我需要在谷歌地圖上繪製成千上萬的GPS數據,下面的方法放慢速度並退出Firefox或Chrome(超時)。

如何繪製在谷歌地圖更多的數據,也應該是快

我的javascript代碼,銷售數據將是JSON數據:

function show_map_all_data(sale_data) 
    { 
init_map(); 
    var count_actual=sale_data.length; 
    var locations=[]; 

       for (var i=0;i<count_actual;i++) 
     { 
       var temp=[] 
       temp.push(sale_data[i]['GPS_latitude'],sale_data[i]['GPS_longitude']) 
       locations.push(temp); 
       } 
//console.log(locations); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
      icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
       strokeColor: '#8e2014', 
       scale: 4, 
       strokeOpacity: 1.0, 
       strokeWeight: 10, 
       fillColor: '#8e2014', 
       animation: google.maps.Animation.DROP, 
    }, 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0] + "," + locations[i][1]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 

    } 

    } 

回答

1

你可能會需要考慮markerclustering以加快您的頁面加載時間(並避免超時)。客戶端呈現的多個標記可能是許多映射應用程序性能明智的倒臺。很難進行基準測試,修復以及在某些情況下甚至確定存在問題(由於瀏覽器實施差異,客戶端可用的硬件,移動設備,列表不斷)。

開始解決此問題的最簡單方法是使用標記聚類解決方案。基本想法是將地理位置相似的位置分組爲具有顯示點數的組。隨着用戶放大地圖,這些組將展開以顯示下方的各個標記。

也許最簡單的實現是markerclusterer庫。一個基本的實現將是如下(庫進口之後,並不能反映你的代碼,這僅僅是我能想出的最簡單的例子):

<script type="text/javascript"> 
    function initialize() { 
    var center = new google.maps.LatLng(37.4419, -122.1419); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 
    for (var i = 0; i < 100; i++) { 
     var location = yourData.location[i]; 
     var latLng = new google.maps.LatLng(location.latitude, 
      location.longitude); 
     var marker = new google.maps.Marker({ 
     position: latLng 
     }); 
     markers.push(marker); 
    } 
    var markerCluster = new MarkerClusterer(map, markers); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

的標誌,而不是直接添加到地圖上都添加到數組中。然後將該數組傳遞給處理複雜計算的庫並附加到地圖上。

這些實現不僅大大提高了客戶端性能,而且在很多情況下還導致更簡單,更簡潔的UI和更大規模的數據消化。

其他實現可從Google獲得。

編輯回答評論

如果你看看這裏:http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/reference.html和查找名爲MAXZOOM可以設置在聚類器選項的縮放級別屬性對象後,該集羣將被關閉,讓所有標記被繪製。

+0

謝謝Swires現在工作正常我正在使用MarkerClusterer,感謝您的寶貴意見 – user3296668

+0

Hi swires其工作正常,現在我想要刪除markerClusterer當地圖處於最大縮放級別時,一旦地圖處於maxiumum縮放級別,標記沒有顯示?任何想法在此先感謝 – user3296668

+1

請參閱編輯以解決此問題。 – Swires

相關問題