Question

我在Google地图中使用MarkerClusterer，重叠Marker Spiderfier和带标签的标记，以及使用Ajax更新实时数据。

问题是当我设置Ajax刷新一些时间（比如2秒）时，地图会冻结并且不会响应平移或缩放，但标记仍在移动和更改。

为什么会这样？顺便说一下，我在轨道上使用Ruby。我可以使用太多脚本吗？关于从哪里开始修复此问题的任何建议？

附上我的代码和冻结地图：

<%= form_tag '/gmaps', :method => :get, :class => "form-search" do %>
  <%= select_tag "project_id", options_for_select(@projects, :selected => @project_id), :prompt => "Select Project" %>
  <%= submit_tag "Filter", :class => "btn" %>
<% end %>


<!DOCTYPE html>
<html>

<head>
<%= include_gon %>
<link href="/assets/gmaps.css" rel="stylesheet" type="text/css">
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
  <script src="/assets/marker.min.js" type="text/javascript" ></script>
  <script src="/assets/markerclusterer.js" type="text/javascript" ></script>

  <script src="/assets/markerclusterer.js" type="text/javascript" ></script>


 <script type="text/javascript" src="/assets/markerwithlabel.js"></script>
 <script type="text/javascript">

   var marker=[]
   function initMap() {

     var latLng1 = new google.maps.LatLng(1.352083, 103.819836);
     var myOptions = {
         zoom: 12,
         center: latLng1,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
     var mcOptions={gridSize: 50,maxZoom: 15};


     var oms = new OverlappingMarkerSpiderfier(map)

     for(i=0;i<gon.astatic.length;i++){


      var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]);
       if(i<gon.vnum){
       marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/vibra.png" ,title: gon.astatic[i][4],labelClass: "labelsv",labelContent: gon.astatic[i][3]});}
       else
       {
      marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/noise.png" ,title: gon.astatic[i][4],labelClass: "labelsn",labelContent: gon.astatic[i][3]});
       }

       oms.addMarker(marker[i]);


     }

        var stringiw;
    var mc = new MarkerClusterer(map,marker,mcOptions); 
    var iw = new google.maps.InfoWindow();




  var infowindow = new google.maps.InfoWindow({
    maxWidth: 240
  });



         google.maps.event.addListener(mc,"mouseover",function(c){
        var markerc = c.getMarkers();
        var datastring='';
        for( var i=0; i< markerc.length;i++){
    datastring += markerc[i].title ;
        datastring += ' : ';
        datastring += '<font color="#48b5e9">'+markerc[i].labelContent+'</font>';
        datastring += "<br>";
    }

        var content = '<div id="iw-container">' +
                    '<div class="iw-title">Realtime Monitor </div>' +
                    '<div class="iw-content">' +
                      '<div class="iw-subTitle">'+datastring+'</div>' +
                    '</div>' +
                    '<div class="iw-bottom-gradient"></div>' +
                  '</div>';

    infowindow.setContent(content);
    infowindow.setPosition(c.getCenter());
    infowindow.open(map);
    });

   google.maps.event.addListener(mc,'clusterclick',function(){
        infowindow.close();
        });

 // *
  // START INFOWINDOW CUSTOMIZE.
  // The google.maps.event.addListener() event expects
  // the creation of the infowindow HTML structure 'domready'
  // and before the opening of the infowindow, defined styles are applied.
  // *
  google.maps.event.addListener(infowindow, 'domready', function() {


    var iwOuter = $('.gm-style-iw');
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '0.7'});
    });
  });

   }

    var ajax_call = function() {

     $.ajax({
        type:"GET",
        url:"gmaps/updatedata",
        dataType:"json",
        success: function(result){
        //result
        //console.log(result);
        for(i=0;i<result.length;i++)
       {
       marker[i].labelContent=result[i];
       marker[i].label.setContent();
       }

        }})
   };
   var interval = 1000*30
   setInterval(ajax_call,interval);
 </script>
</head>

<body onload="initMap()">
<div id="map_canvas" style="width: 945px; height: 700px;"></div>
</body>
</html>

zoom level changed but map background freeze

This its what it should be

当Ajax过于频繁刷新时，谷歌地图会冻结

0 个答案: