谷歌地图标记性能

Question

在我的网站http://offersmapper.com/我有一张地图，要显示2000到5000个标记。真的很慢。我尝试了markercluster的建议，但没有…很可能是我做错了什么…有人能帮我吗?:

function initialize() {  
var mapOptions = {
  zoom: <? echo $zoom; ?>,
  center: new google.maps.LatLng(<? echo $lat ?>, <? echo $lng ?>),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);  
var markers_1 = [];
<?
while($deal=mysql_fetch_assoc($query))
{
$t="
var contentString".$deal['id']."='".$info."';
var InfoWin".$deal['id']."= new google.maps.InfoWindow({
      content: contentString".$deal['id'].",
      maxWidth: 300
    });
var marker".$deal['id']." = new google.maps.Marker({
  position: new google.maps.LatLng(".$deal['lat'].", ".$deal['lng']."),
  icon: ".$icon."
});
google.maps.event.addListener(marker".$deal['id'].", 'click', function() {
    InfoWin".$deal['id'].".open(map,marker".$deal['id'].");
  });
markers_1.push(marker".$deal['id'].");"; 
echo $t;
}
?>
var markerCluster_1 = new MarkerClusterer(map, markers_1, {maxZoom: 7, gridSize: 25, styles: styles[0]} );

Answer 1

尽量减少你的html代码:你应该把数据作为json对象传递给javascript。然后javascript应该遍历所有元素并创建标记，等等。多分类HTML代码，和更快的加载。

我假设你使用jQuery编写javascript代码:

      ... //your code before the while loop
      <?
      $deals = array();
      while($deal=mysql_fetch_assoc($query)){
           $deals[$deal[$id]] = $deal;
      }?>
      <script type="text/javascript">
         var deals = <?=json_encode($deals)?>;             
         var infoWindow = [];
         var marker =[];
         $.each(deals,function(k,v){ 
              var i = k; 
              infoWindow[i] = new  google.maps.InfoWindow({ 
                 content: v.info, 
                 maxWidth: 300 }); 
              markers[i] = new google.maps.Marker({ 
                 position: new google.maps.LatLng(v.lat, v.lng), icon: v.icon 
              });
              google.maps.event.addListener(markers[i] , 'click', function(){
                  infoWindow[i].open(map,markers[i]);
              });
         });
         var markerCluster_1 = new MarkerClusterer(map, markers, {maxZoom: 7, gridSize: 25, styles: styles[0]} );
      </script>

如果还不够，您可以通过ajax加载数据