带有集群的谷歌地图不起作用

Question

我有一个谷歌地图，我在上面使用像这样的集群

script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="js/cluster';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>
    <script type="text/javascript">
      google.load('maps', '3', {
        other_params: 'sensor=false'
      });
      google.setOnLoadCallback(initialize);
      function initialize() {
        var GPS = <%=GPS %>
        var map_center = new google.maps.LatLng(31.2330555556,72.3330555556);
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 6,
          center: map_center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow(); 
          if (markerClusterer) {
          markerClusterer.clearMarkers();
        }  
        var markers = [];       
        for(i=0; i<GPS.length; i++)
         { 
         var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));
         var imageUrl = 'ico/' + GPS[i].ICON;        
           markers[i] = new google.maps.Marker({
           position: GPS[i].GPS,
           draggable: true,
           icon: markerImage,
           Info: '<table frame=box><tr><td align="Left"><font face="Arial" size=2 color=#336699>Shop Name:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].SHOP + '</font></td></tr><tr>'+
          '<td align="Left"><font face="Arial" size=2 color=#336699>Owner:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].OWNER + '</font></td></tr>'+
          '<td align="Left"><font face="Arial" size=2 color=#336699>Mobile:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].MOBILE + '</font></td></tr>'+
          '<tr><td align="Left"><font face="Arial" size=2 color=#336699>Distributer:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].DIST + '</font></td></tr><tr>'+
          '<tr><td align="Left"><font face="Arial" size=2 color=#336699>Region:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].REGION + '</font></td></tr>'+
          '<tr><td align="Left"></td><td align="Left"><font face="Arial" size=2 color=#336699><a target=_blank href=http://221.120.216.52/elp/sfpl/sfpl.php?ccode=01&amp;&regno='+ GPS[i].REGNO +'>View</a></td></tr>'+
          '</table>',
          title:GPS[i].SHOP + '(' +GPS[i].DIST + ')'
          });
          markers.push(markers);
          google.maps.event.addListener(markers[i], 'click', function() {
            infowindow.setContent(this.Info);
            infowindow.open(map,this);
            });   
        }
       var markerClusterer = new MarkerClusterer(map, markers);
      }
    </script>

在这里你可以检查http://dnet.sml.com.pk/map/SFPLSurvey.aspx当地图加载时，它就像被释放了一样，意味着不要用鼠标移动。当我点击平移移动时，它开始移动。Plz任何一个帮助我想要的地图应该在用户加载时移动

Answer 1

我不是专家，但var GPS=<%=GPS似乎正在向页面中倾倒大量信息。很可能是这导致了地图冻结。为了调试的目的，删除提取的数据的数量，并查看映射是否按您的意愿执行。

希望它能帮助

Answer 2

与其将所有数据作为页面的一部分加载，不如在地图渲染后使用AJAX技术加载。

从XML加载数据的Marker-Clusterer示例（您也可以使用JSON）。