我最近将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();
}