У меня возникли проблемы с правильной обновлением API Карт Google. У меня запущен таймер javascript, который должен периодически обновлять поток трафика, но я не вижу, как это происходит.
Как я понимаю документацию, я могу сказать что-то вроде "layer.setMap(null)"; затем "layer.setMap(карта)"; для обновления слоя (источник: https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer).
Я знаю, что загружаются новые фрагменты карты (например, я могу их увидеть в разделе "Ресурсы" инструментов Chrome dev), но браузер не выполняет их. Возможно, что-то фундаментальное, что мне не хватает.
Я пробовал несколько вещей, чтобы включить:
- Использование метатегов для отключения кэширования: Использование <meta> теги, чтобы отключить кеширование во всех браузерах?
- Использование файла манифеста: Как предотвратить Google Maps API v3 от кеширования плит (чтобы сохранить пространство для хранения)?
- Отключение кэширования браузера Chrome (при сохранении открытых инструментов dev): Отключение кеша Chrome для разработки веб-сайта
- Запуск другого события для обновления слоев: Google Maps обновить уровень трафика
- Полностью повторная инициализация карты при каждом событии таймера.
Есть ли способ гарантировать, что браузер будет визуализировать новые изображения без принудительной перезагрузки страницы?
Ниже приведен упрощенный вариант страницы (на основе ответа от Google Maps обновить уровень трафика).
<html>
<head>
<title>Map Testing</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var map,
trafficLayer,
mapTimerHandle;
$(function() {
initMap();
mapTimerHandle = setInterval(refreshMap, 15000);
});
function refreshMap() {
trafficLayer.setMap(null);
trafficLayer.setMap(map);
}
function initMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {zoom: 15, center: new google.maps.LatLng(40.7127, -74.0059)});
trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
</head>
<body style="margin:0px;">
<div id="map" style="width:100%; height:100%;"></div>
</body>
</html>