这是我的链接 - http://www.wesharenotes.com/maps。 2-3分钟后加载一些位置标记。我正在使用这些文件jquery-activmap.js,markercluster.js,jquery-activmap.css。 我无法找到问题所在。请任何人给我解决方案。
这是我的代码
<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 :(得分:0)
只需在浏览器中查看您的开发者工具(F12),然后转到网络标签 - 您可以看到已加载了大量内容 - 您的页面转移&gt; 73 MB的数据 - 很多封面图片和内容。所以这只是因为你的内容,而不是因为其中一个库。然而,markercluster.min.js会向控制台打印很多对象。检查这个。
如果您提供一些代码,我们可以看到是否还有其他问题。