2016-08-09 6 views
-1

これは私のリンクhttp://www.wesharenotes.com/mapsです。いくつかの位置マーカーが2-3分後に読み込まれます。これらのファイルjquery-activmap.js、markercluster.js、jquery-activmap.cssを使用しています。 私は問題が何かを見つけることができませんでした。誰か私に解決策を教えてください。あなたは多くのコンテンツがロードされていることを見ることができますが - - ここで地図の単一の場所マーカーが遅すぎる

はちょうどあなたのブラウザで開発者向けツール(F12)を見ていると、タブネットワークに行く私のコード

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta property="og:url" content="http://wesharenotes.com/maps" /> 
<meta property="og:type" content="article" /> 
<meta property="og:title" content="Add your blog to our map!" /> 
<meta property="og:description" content="We are a friendly community!" /> 
<meta property="og:image" content="http://wesharenotes.com/app/webroot/assets/maps/images/bmap.png" /> 

<link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
<link rel="stylesheet" href="assets/css/jquery-activmap.css"> 

<!-- Fonts --> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 

<!-- JQuery --> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<!-- Bootstrap 3 --> 
<script src="assets/js/bootstrap.min.js"></script> 
<!-- Google Maps API V3 --> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 

<!-- WeShareNotes plugin --> 
<script src="assets/js/jquery-activmap.js"></script> 
<script src="assets/js/markercluster.js"></script> 
<script> 
    $(function() { 

     $.ajax({ 
      url: "assets/maps/places.json", 
      type: "POST", 
      dataType: "json", 
      success: function(data) { 
       response = data; 

       $('#activmap-wrapper').activmap({ 
        places: response.places, 
        icon: 'assets/maps/images/marker.png', 
        posPanel: 'left', 
        showPanel: false, 
        radius: 0, //18 
        cluster: true, 
        zoom: 0, //6 
        autogeolocate: false, 
       }); 
      } 
     }); 

    }); 
</script> 
</head> 

<body> 

<!-- Email subscription modal--> 

<div class="modal fade subscription-dialog" id="subscriptionModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog " role="document"> 
     <div class="modal-content subscription-content"> 
      <div class="modal-body"> 
       <form id="emailSubscriptionData" action="" method="post"> 
        <div class="form-group"> 
         <p style="text-align:center"><img src="http://wesharenotes.com/app/webroot/assets/images/panda.gif" /></p> 

         <h3 class="signup-wrap">New!! Map of Bloggers from Earth</h3> 

         <label for="message-text" class="control-label" style="color:#d2851e;">Want more visitors on your blog? Add your blog to the map and Share with your blogger friends. </label> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">I understand</button> 
       <!-- <button type="button" class="btn btn-success Submitbutton" id="subscribeBtn">Proceed to Map</button>--> 
      </div> 
      <div class="signup-smallprint">Based on ZipCodes, not precise locations.</div> 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <a href="http://wesharenotes.com" target="_blank" title="HomePage"><img src="assets/maps/images/logo.png"></a> 
      <div class="form-group"> 
      </div> 

      <a class="btn btn-default2" href="http://wesharenotes.com/users/register" style="background-color:#e94a3a;margin-bottom:10px;"><i class="fa fa-crosshairs"></i> Add your blog to the Map</a> 

      <div class="panel-group" id="activmap-accordion"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
         <a data-toggle="collapse" href="#collapse-services"> 
          <i class="fa fa-list"></i> Categories 
         </a> 
        </h4> 
        </div> 
        <div id="collapse-services" class="panel-collapse collapse in"> 
         <div class="panel-body"> 
          <input type="checkbox" name="marker_type[]" value="1" checked> Bloggers 
          <br> 
          <input type="checkbox" name="marker_type[]" value="2" checked> Creatives 
          <br> 
         </div> 
        </div> 
       </div> 

       <style type="text/css"> 
        ul.share-buttons { 
         list-style: none; 
         padding: 0; 
        } 

        ul.share-buttons li { 
         display: inline; 
        } 

        ul.share-buttons img { 
         width: 52px; 
         filter: grayscale(60%); 
        } 

        ul.share-buttons img:hover { 
         width: 52px; 
         filter: grayscale(0%); 
        } 

        .subscription-content { 
         background: rgba(255, 255, 255, .8); 
         color: #536271; 
         padding: 20px; 
         max-width: 580px; 
         margin: 30px auto; 
         border-radius: 5px; 
         box-shadow: 0 2px 5px 0 rgba 
        } 

        .subscription-dialog { 
         color: #536271; 
         position: absolute; 
         margin-left: auto; 
         margin-top: auto; 
         background-color: rgba(66, 139, 202, 0.78); 
         z-index: 11; 
        } 

        .signup-wrap h3 { 
         font-size: 1.6rem; 
         font-weight: 600; 
         text-transform: uppercase; 
         text-align: center; 
         margin: .5rem; 
         font-family: proxima-nova, sans-serif; 
        } 

        .signup-smallprint { 
         font-size: 1.2rem; 
         font-style: italic; 
         text-align: center; 
         opacity: .8; 
        } 

        .label { 
         display: block; 
         padding-left: 15px; 
         text-indent: -15px; 
        } 

        .input { 
         width: 13px; 
         height: 13px; 
         padding: 0; 
         margin: 0; 
         vertical-align: bottom; 
         position: relative; 
         top: -1px; 
         *overflow: hidden; 
        } 

        .sign-up-cta { 
         margin: 0 auto; 
         border: 1px solid #f0f0f0; 
         text-align: center; 
         overflow: hidden; 
         margin-top: 1em; 
         border-radius: 5px; 
         z-index: 10; 
         max-width: 120em; 
         width: 100%; 
         margin-top: 1em; 
         margin-bottom: 1em; 
         background-color: #fff; 
         position: relative; 
         -webkit-transition: bottom 1s; 
         transition: bottom 1s 
        } 

        .modal-footer { 
         padding-top: 0; 
        } 
       </style> 
       <p style="transition: font-size 20s ease-in-out;font-size:1.5em;">Share:</p> 
       <ul class="share-buttons"> 
        <li> 
         <a href="http://www.facebook.com/share.php?u=http://wesharenotes.com/maps" title="Share on Facebook" target="_blank"> 
          <img src="http://wesharenotes.com/app/webroot/assets/images/Facebook.svg" /> 
         </a> 
        </li> 
        <li> 
         <a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fwesharenotes.com/maps&text=Map%20of%20Bloggers%20Near%20You:%20http%3A%2F%2Fwesharenotes.com/maps&via=wesharenotes" target="_blank" title="Tweet"><img src="http://wesharenotes.com/app/webroot/assets/images/Twitter.svg"></a> 
        </li> 
        <li> 
         <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwesharenotes.com/maps&title=Map%20of%20Bloggers%20Near%20You&summary=&source=http%3A%2F%2Fwesharenotes.com/maps" target="_blank" title="Share on LinkedIn"><img src="http://wesharenotes.com/app/webroot/assets/images/LinkedIn.svg"></a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-9"> 
      <div id="activmap-wrapper"> 
       <!-- Places panel (auto removable) --> 
       <div id="activmap-places" class="hidden-xs"> 
        <div id="activmap-results-num"></div> 
       </div> 
       <!-- Map wrapper --> 
       <div id="activmap-canvas"></div> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 
     var userID = '<?php echo $this->Session->read(' 
     Auth.User.id ');?>'; 
     if (!userID) { 

      $('#subscriptionModal').modal({ 
       backdrop: 'static', 
       keyboard: false 
      }); 
      $('#subscriptionModal').modal('show'); 
      $('.modal-backdrop.in').hide(); 
      $("#subscribeBtn").click(function() { 
       var email = $('#email_subscription').val(); 
       if (isEmail(email)) { 
        $.ajax({ 
         url: "/maps/bloggers_sbuscribe/", 
         data: $('#emailSubscriptionData').serialize(), 
         type: "POST", 
         dataType: "json", 
         success: function(e) { 
          $('#subscriptionModal').modal('hide'); 
         } 
        }); 
       } else { 
        $('#subscribe_error').html('Please enter a valid email'); 
        return false; 
       } 

      }); 
     } 
    }); 

    function isEmail(email) { 
     var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
     return regex.test(email); 
    } 
</script> 

</body> 

</html> 
+0

あなたの問題を示す[最小、完全で、検証可能な例](http://stackoverflow.com/help/mcve)を提供してください。 – Joyson

答えて

0

ですあなたのページは> 73 MBのデータを転送します - たくさんの表紙画像やものがあります。これはあなたのコンテンツのためだけであり、ライブラリの1つのためではありません。それにもかかわらず、markercluster.min.jsは多くのオブジェクトをコンソールに出力します。これをチェックしてください。

にコードを入力すると、別の問題があるかどうかを確認できます。

関連する問題