如何使用 settimeout 函数检查谷歌地图 API 是不是已完全加载？
Posted
技术标签:
【中文标题】如何使用 settimeout 函数检查谷歌地图 API 是不是已完全加载？【英文标题】：How to check google map API is fully loaded or not using setimeout function?如何使用 settimeout 函数检查谷歌地图 API 是否已完全加载？ 【发布时间】：2020-10-13 18:20:36 【问题描述】：首先我检查了没有 setTimeout 功能的谷歌地图 API 是否已完全加载或没有使用地图空闲功能。它工作正常。但我尝试在谷歌地图加载页面中使用 setTimeout 函数。地图加载成功。但地图空闲功能无法解决此问题。
代码.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 100%;
/* Optional: Makes the sample page fill the window. */
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap()
var myLatLng = lat: -25.363, lng: 131.044;
setTimeout(function()
map = new google.maps.Map(document.getElementById('map'),
zoom: 4,
center: myLatLng
);
,2000);
google.maps.event.addListenerOnce(map, 'idle', function()
console.log('hi')
var marker = new google.maps.Marker(
position: myLatLng,
map: map,
title: 'Hello World!'
);
)
// var map = new google.maps.Map(document.getElementById('map'),
// zoom: 4,
// center: myLatLng
// );
// var marker = new google.maps.Marker(
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// );
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
</script>
</body>
</html>
如何实现这个场景。
【问题讨论】：
【参考方案1】：您可以使用 Maps Javascript API Events 的 tilesloaded 事件。 tilesloaded 用于检测地图何时已完全加载。下面是使用您当前实现的示例 POC。
var map;
function initMap()
var myLatLng = lat: -25.363, lng: 131.044;
map = new google.maps.Map(document.getElementById('map'),
zoom: 4,
center: myLatLng
);
map.addListener('tilesloaded', function()
console.log('map is loaded');
);
google.maps.event.addListenerOnce(map, 'idle', function()
console.log('map is idle')
var marker = new google.maps.Marker(
position: myLatLng,
map: map,
title: 'Hello World!'
);
);
如果这对您没有帮助，您还可以查看此 *** 问题 How can I check whether Google Maps is fully loaded? 的答案。看来很多用户之前也遇到过这个问题。
希望这些信息对您有所帮助，并祝您申请成功！
【讨论】：
【参考方案2】：使用 titesloaded 事件监听地图加载完毕。
【讨论】：
以上是关于如何使用 settimeout 函数检查谷歌地图 API 是不是已完全加载？的主要内容，如果未能解决你的问题，请参考以下文章