0

在我的网站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]} );
4

1 回答 1

1

尝试减少您的 html 代码：您应该将数据作为 json 对象传递给 javascript。比 javascript 应该遍历所有元素并创建标记等。mutch 排序器 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加载数据。

于 2013-03-10T09:37:06.063 回答