地图加载中的单个位置标记太慢

时间:2016-08-09 05:26:10

标签: google-maps google-maps-api-3

这是我的链接 - 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>

1 个答案:

答案 0 :(得分:0)

只需在浏览器中查看您的开发者工具(F12),然后转到网络标签 - 您可以看到已加载了大量内容 - 您的页面转移&gt; 73 MB的数据 - 很多封面图片和内容。所以这只是因为你的内容,而不是因为其中一个库。然而,markercluster.min.js会向控制台打印很多对象。检查这个。

如果您提供一些代码,我们可以看到是否还有其他问题。