0

このようなクラスターを使用しているGoogleマップがあります

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 を確認できます。マップが読み込まれると、フリーズしたように表示されます。つまり、マウスで移動しないことを意味します。ユーザーがロードしたときにマップが移動するようにしたい

4

2 に答える 2

0

すべてのデータをページの一部としてロードするのではなく、AJAX手法を使用して、マップがレンダリングされた後にデータをロードします。

XML からデータをロードするマーカー クラスタラーの例(JSON も使用できます)。

于 2013-08-21T13:18:20.610 に答える
0

私は専門家ではありませんが、 var GPS = <%=GPS %> はページに多くの情報をダンプしているようです。これがマップのフリーズを引き起こしている可能性が非常に高いです。デバッグの目的で、プルされたデータの数をドロップし、マップが意図したとおりに機能するかどうかを確認します。

それが役に立てば幸い

于 2013-08-21T12:58:26.140 に答える