Question

我正在使用Google地图进行项目，并成功实施了MarkerClusterer库。我的问题是，当我开始在页面中加载地图时，我的地图正在加载两次。到目前为止，这是我的JS文件：

全局：

var map;
var startLatLng = {lat: 37.020098, lng: -101.953125};
var userAncestorMarkers = []; 
var mcOptions = {
    gridSize: 50,
    maxZoom: 15,
    imagePath: '../img/m'
};

初始化我的地图并使用AJAX获取标记

//so i don't have to write document.getElementById all the time
function id(v){
    return document.getElementById(v);
}

//Initialize the mighty google map and perform an AJAX call to obtain data points.
function initMap() {
    //if there is no div#map, abort.
    if(!id('map')) {
        return;
    }
    //initial map options
    var options = {
        center: startLatLng,
        zoom: 3,
        minZoom: 3,
        maxZoom: 15,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        styles: ...

    //otherwise, load the map
    map = new google.maps.Map(id('map'), options);
    google.maps.event.addListener(map, 'center_changed', function() {
        checkBounds(map);
    });

    //obtain the coordinates from table ancestor_origin and create points showing where people currently live.
    downloadUrl("../view-user-ancestor.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latitude = markers[i].getAttribute("latitude");
            var longitude = markers[i].getAttribute("longitude");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("latitude")),
                parseFloat(markers[i].getAttribute("longitude")));
                var marker = new google.maps.Marker({
                    position: point,
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 8.5,
                        fillColor: "#98FB98",
                        fillOpacity: 0.4,
                        strokeWeight: 0.1
                    }
            });
            userAncestorMarkers.push(marker);
            console.log(userAncestorMarkers);
        }
    });

    var userAncestorCluster = new MarkerClusterer(map, userAncestorMarkers, mcOptions);
    google.maps.event.addDomListener(window, 'load', initMap);
}


function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}

// If the map position is out of range, move it back
function checkBounds(map) {
    var latNorth = map.getBounds().getNorthEast().lat();
    var latSouth = map.getBounds().getSouthWest().lat();
    var newLat;
    if(latNorth<85 && latSouth>-85)     /* in both side -> it's ok */
    return;
    else {
        if(latNorth>85 && latSouth<-85)   /* out both side -> it's ok */
        return;
        else {
            if(latNorth>85)
            newLat =  map.getCenter().lat() - (latNorth-85);   /* too north, centering */
            if(latSouth<-85)
            newLat =  map.getCenter().lat() - (latSouth+85);   /* too south, centering */
        }
    }
    if(newLat) {
        var newCenter= new google.maps.LatLng( newLat ,map.getCenter().lng() );
        map.setCenter(newCenter);
    }
}


$(document).ready(function(){
    initMap();
});

注意最后几行。这是我添加我的DomListener的地方。如果这不在initMap（）函数之外，我会收到一条错误，上面写着＆＃34; Uncaught ReferenceError：google未定义＆＃34;

如何在不加载地图两次的情况下使用markerclusterer初始化地图？我知道我正在调用我的函数initMap（）运行两次，一次是在文档加载时，一次是在文档加载完之后，但是我不能让markerclusterer在没有google.maps.event.addDomListener(window, 'load', initMap);在initMap内的情况下工作（）。

HTML：

<html>
<head>
    {% include '/includes/head.html.twig' %}
    <script   src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=#######"
    async defer></script>
    <script src="/js/markerclusterer.js"></script>
</head>
<body>
    <div id="map"></div>
</body>

<!-- Load Scripts -->
<script src="/js/googlemaps_view.js"></script>
<script src="/js/scripts.js"></script>
</html>

MarkerClusterer加载我的地图两次

0 个答案:

MarkerClusterer加载我的地​​图两次

0 个答案:

MarkerClusterer加载我的地图两次