2016-08-09 33 views
-1

Dies ist mein Link - http://www.wesharenotes.com/maps. Einige location marker laden nach 2-3 Minuten. Ich benutze diese Datei jquery-activmap.js, markercluster.js, jquery-activmap.css. Ich konnte nicht finden, was das Problem ist. Bitte geben Sie mir die Lösung.Markierung für einen einzelnen Standort in Karte wird zu langsam geladen

Hier ist mein Code

<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

Geben Sie ein [minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) an, das Ihr Problem veranschaulicht. – Joyson

Antwort

0

Sie einen Blick auf Ihre Entwicklertools (F12) in Ihrem Browser und Netzwerk auf die Registerkarte gehen - dort können Sie eine Menge von Inhalten sehen, dass geladen wird - Ihre Seite überträgt> 73 MB Daten - viele Cover-Bilder und ähnliches. Das liegt nur an deinem Inhalt und nicht an einer der Bibliotheken. Trotzdem druckt der markercluster.min.js viele Objekte auf die Konsole..überprüfe dies.

Wenn Sie einen Code bereitstellen, könnten wir sehen, ob es ein anderes Problem gibt.