谷歌地图与群集无法正常工作

时间:2013-08-21 12:05:17

标签: javascript google-maps markerclusterer

我有一个谷歌地图,我正在使用这样的群集

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 当Map Loads它就像Freezed意味着不要随着Mouse移动。当我点击Pan to Move然后它开始maving.Plz任何一个帮助我希望该地图在用户加载时应该移动

2 个答案:

答案 0 :(得分:0)

我不是专家,但是var GPS =&lt;%= GPS%&gt;似乎是在页面中倾倒了大量信息。很可能这会导致地图冻结。为了调试,删除拉出数据的数量,并查看地图是否按照您的意图执行。

希望有所帮助

答案 1 :(得分:0)

不是将所有数据作为页面的一部分加载,而是使用AJAX技术在地图渲染后加载它。

Marker Clusterer example that loads data from XML(您也可以使用JSON)。