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应该遍历所有元素并创建标记等.mutch sorter 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加载数据。

谷歌地图标记表现

1 个答案: