刷新后Google Maps API消失了文本

时间:2015-05-05 20:17:31

标签: javascript google-maps

我最近将Google Maps API添加到了我的网站,从那时起每次刷新页面时,整个文本都会开始更改字体大小,然后会在短时间内消失。你们之前有没有人遇到过这个问题?

以下是Gif和我的Google地图代码:

var map;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(){
    var locations = document.querySelectorAll('.map-switcher');
    var isActive;
    var lat = [7.740107, 7.740107];
    var lng = [-83.438535, -83.438535];
    var title = ['title1', 'title2'];
    var text = ['text1', 'text2'];
    var mapCanvas = document.getElementById('map-canvas');

    for(var i = 0; i < locations.length; i++){
        if(hasClass(locations[i], 'active')){
            var mapOptions = switchLocation(lat[i], lng[i]);
            isActive = i;
            break;
        }
    }

        map = new google.maps.Map(mapCanvas, mapOptions);

    var infoWindow = new google.maps.InfoWindow({content: 'loading'});

    var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.Drop,
        title: title[isActive],
        position: new google.maps.LatLng(lat[isActive], lng[isActive]),
        html: text[isActive]
    });
    infoWindow.setContent(marker.html);
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, this);
    });
    infoWindow.open(map, marker);

}

function switchLocation(lat, lng){
    var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    return mapOptions;
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

for(var i = 0; i < mapSwitcher.length; i++)
    mapSwitcher[i].addEventListener('click', switchActiveMap, false);

function switchActiveMap(event){
    for(var i = 0; i < mapSwitcher.length; i++){
        if(hasClass(mapSwitcher[i], 'active')){
            mapSwitcher[i].classList.remove('active');
        }
        else mapSwitcher[i].classList.add('active');
    }
    initialize();
}

0 个答案:

没有答案