2012-10-03 31 views
4

你好,這是我的第一篇文章在這裏..markerclusterer限制

我一直在與谷歌地圖玩弄試圖在法國露營地的名單。

我已經到了讀取數據的xml文件的地步 加載地圖並對結果進行聚類,它的所有工作都是,但速度很慢。

Q1有沒有你甚至可以使用聚類器呈現標記的數量限制(有> 7000條記錄,此刻)

Q2 有什麼明顯錯誤與我到目前爲止的代碼:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Read XML in Microsoft Browsers</title> 
     <script src="http://maps.google.com/maps/api/js?sensor=false&language=en&region=GB" type="text/javascript"></script> 
     <script src="scripts/markerclusterer.js" type="text/javascript"></script> 
     <link rel="stylesheet" type="text/css" href="stylesheets/style_1024.css" /> 
    <script type="text/javascript"> 
     var xmlDoc; 
     function loadxml() { 
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
      xmlDoc.async = false; 
      xmlDoc.onreadystatechange = readXML; 
      xmlDoc.load("xml_files/France_all.xml"); 
     } 

     function readXML() { 
      if (xmlDoc.readyState == 4) { 
       //alert("Loaded"); 
       //set up map 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 10, 
        center: new google.maps.LatLng(0, 0), 
        mapTypeControl: true, 
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, 
        navigationControl: true, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       var bounds = new google.maps.LatLngBounds(); 
       var infowindow = new google.maps.InfoWindow({ maxWidth: 100 }); 
       var marker, i 

       var markers = []; 
       var html = []; 

       var x = (xmlDoc.getElementsByTagName("placemark").length); 
       //for (i = 0; i < x; i++) { 
       for (i = 0; i < x; i++) { 
        //document.write(xmlDoc.documentElement.childNodes[1].firstChild.tagName) + '<br>'; 
        desc = xmlDoc.getElementsByTagName("description")[i].text; 
        lat = parseFloat((xmlDoc.getElementsByTagName("latitude")[i].text)); 
        lon = parseFloat((xmlDoc.getElementsByTagName("longitude")[i].text)); 
        myicon = (xmlDoc.getElementsByTagName("icon")[i].text); 
        //create new point 
        var point = new google.maps.LatLng(lat, lon); 

        //create new marker 
        marker = new google.maps.Marker({ 
         position: point, 
         panControl: false, 
         map: map, 
         icon: myicon 
        }); 

        //increae map bounds 
        bounds.extend(point); 
        //fit to bounds 
        map.fitBounds(bounds); 

        //add reference to arrays 
        markers.push(marker); 
        html.push(desc); 

        //add listener 
        google.maps.event.addListener(marker, 'click', (function (marker, i) { 
         return function() { 
          infowindow.setContent(html[i]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 

        //alert(i + " " + desc +" added!"); 
       }; 
       //var mc = new MarkerClusterer(map); 
       var mcOptions = {gridSize: 50, maxZoom: 15 }; 
       var mc = new MarkerClusterer(map, markers, mcOptions); 
      } 

     } 
    </script> 


</head> 

<body onload="loadxml()"> 

<div style="height:100%; width:100%"> 
    <div id="map" style="float:left; width:50%; height:100%"> 
     <!--filled via script--> 
    </div> 
    <div style="float:left; width:50%; height:100%"> 
     <h4>Select Region</h4> 
     <select> 
     <option value="Alsace" onclick="loadxml()">Alsace</option> 
     </select> 
    </div> 
</div> 

</body> 
</html> 
+0

你能解決這個問題嗎? – user427969

回答

0

This article may help。基於圖塊的解決方案(FusionTables,KmlLayer或基於服務器的自定義地圖)的渲染速度將比本機Google Maps API v3對象快,即使是集羣也是如此。您可能會看到xml文件的傳輸和處理時間。