2

私は地図アプリケーションを持っていて、document.ready() のときに読み込まれるマーカーがあり、ボタンをクリックすると読み込まれるマーカーがありますが、ボタンをクリックするとマーカーがドキュメントに追加されます。ready() は失われます。

ボタンをクリックすると、ページ全体が送信され、再描画されます。これにより、ズームやスクロール時に地図の動きが非常に遅くなります。誰か助けてくれませんか。以下は私のコードです。ページをより高速に実行したいのですが、すべての ajax リクエストでページを再描画したくありません。

コード

  <script type="text/javascript">


      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(10.670044,-61.515305),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);


        var criminal = new google.maps.MarkerImage('resources/icons/police_new.ico',
                new google.maps.Size(100,106),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

        var companyPos = new google.maps.LatLng(10.670044,-61.515305);
        var companyMarker = new google.maps.Marker({
            position: companyPos,
            map: map,
            icon: criminal,
            title:"First Criminal"
        });


        $.ajax({
            type:'GET',
            async:false,
            global:'false',
            url:'getListOfCrimeHotSpot.htm',
            headers : {Accept: 'application/json'},
            dataType: 'json'            
        }).done(function(hotspot){

            $.each(hotspot, function(i,h){
                var icon = 'resources/icons/information.ico';

                new google.maps.Marker({
                    position:new google.maps.LatLng(h.lat,h.lng),
                    map:map,
                    icon: new google.maps.MarkerImage(icon, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50)),
                    title: 'Crime Rating : ' + h.crimeLevel+' @ ' +h.crimeLevelCount+' / ' + h.totalNumberOfCrimes
                });
            });
        });



       return map; 


      }//end initialize


 var global_citizens;      

$(document).ready(function(){
    map = initialize();


         $('#startTracking').on('click',function(){
             $.each(global_citizens, function(i, c) {
                 console.log(c.name );

             });
         });



    $('#getCitizens').on('click', function() {
        /*var mapOptions = {
            center: new google.maps.LatLng(10.670044, -61.515305),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };*/
         //map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

        $.ajax({
            type: 'GET',
            async : false,
            global: 'false',
            url: 'getListOfMarkers.htm',
            headers : {Accept: 'application/json'},
            dataType: 'json'
        }).done(function(citizens) {
            global_citizens = citizens;

            var markerSource = [
                null,
                null,
                'resources/icons/criminal_new.ico',
                'resources/icons/victim_new.ico',
                'resources/icons/suspect_new.ico'
            ];
            $.each(citizens, function(i, c) {
                //console.log(c.name + ' | ' + c.socialSecurityNumber + ' | ' + c.lat+ ' | ' +c.lng);
                var icon = markerSource[c.citizenType];
                if(markerSource) {
                    new google.maps.Marker({
                        position: new google.maps.LatLng(c.lat, c.lng),
                        map: map,
                        icon: new google.maps.MarkerImage( icon, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50) ),
                        title: c.name +'-' +c.socialSecurityNumber
                  });
                }
            });
        });
    });

});
</script>

html

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:90%">

   <!-- MAP GOES IN HERE -->

  </div>

  <div id="toolbar">
    <button class="btn" id="getCitizens" onclick="" type="button">Get Citizens</button>
    <button class="btn" id="startTracking" onclick="" type="button">Start Tracking</button>
  </div>
</body>
4

2 に答える 2

3

次の行が問題を引き起こしています (この関数内: $('#getCitizens').on('click', function() {)。

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

#getCitizensをクリックするたびに新しいマップを作成しています。代わりに、以前にインスタンス化されたマップ (initialize 関数によって返されたマップ) を使用します。そのようにマップをリロードする必要はありません。

于 2013-05-06T07:49:52.570 に答える