我把谷歌地图嵌入到我的网站。一旦谷歌地图被加载,我需要启动一些JavaScript进程。
有没有办法自动检测当谷歌地图已完全加载,包括瓷砖下载和所有?
存在一个tilesloaded()方法,该方法应该完全完成这个任务,但它不起作用。
我把谷歌地图嵌入到我的网站。一旦谷歌地图被加载,我需要启动一些JavaScript进程。
有没有办法自动检测当谷歌地图已完全加载,包括瓷砖下载和所有?
存在一个tilesloaded()方法,该方法应该完全完成这个任务,但它不起作用。
当前回答
现在你知道地图准备好了没有:
void _onMapCreated(GoogleMapController controller) {
this.controller = controller;
_mapIsReady=true; //create this variable
}
从地图小部件调用此方法
return GoogleMap(
myLocationEnabled: true,
//markers: markers,
markers: Set<Marker>.of(markers.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _initialPosition,
zoom: 5.0,
),
);
其他回答
我正在创建html5移动应用程序,我注意到空闲,bounds_changed和tilesloaded事件在地图对象创建和渲染时起火(即使它不可见)。
为了让我的地图在第一次显示时运行代码,我做了以下工作:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//this part runs when the mapobject is created and rendered
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//this part runs when the mapobject shown for the first time
});
});
这让我在GMaps v3中困扰了一段时间。
我找到了一个这样做的方法:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
当映射进入空闲状态时触发“idle”事件——所有内容都加载了(或加载失败)。我发现它比tilesloaded/bounds_changed和使用addListenerOnce方法更可靠,闭包中的代码在第一次“空闲”被触发时执行,然后事件被分离。
另请参阅谷歌地图参考中的事件部分。
其中变量map是类型为GMap2的对象:
GEvent.addListener(map, "tilesloaded", function() {
console.log("Map is fully loaded");
});
您可以每隔n毫秒检查GMap2.isLoaded()方法,以查看映射及其所有磁贴是否已加载(window.setTimeout()或window.setInterval()是您的朋友)。
虽然这不会为您提供加载完成的确切事件,但它应该足以触发Javascript。
对于谷歌Maps V3,检查谷歌Maps何时完全加载。
诀窍是把这里所有提交的内容结合起来
首先,你必须创建一个映射的例子:
let googleMap = new google.maps.Map(document.getElementById(targetMapId),
{
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
}
],
});
然后你需要为它设置一个默认位置来加载。它可以在任何地方
googleMap.setCenter({
lat: 26.12269,
lng: -80.130172
});
最后,一旦它完成加载该位置的瓷砖,你可以通过“tilesloaded”事件处理代码,这些代码可以包括重新居中地图,放置标记等。
这可以确保在对映射进行操作之前已经加载了它
google.maps.event.addListenerOnce(googleMap, 'tilesloaded', function(){
// do something only the first time the map is loaded
});
其他人也建议“空闲”活动,但我运气不太好,因为它对我来说是偶然的。
google.maps.event.addListenerOnce(googleMap, 'idle', function(){
// do something only the first time the map is loaded
});
然而当我使用“tilesloaded”时,虽然我确实得到了一个快速的光点,然后跳转到正确的地图视图,但它总是有效的……所以我选择了两害相权取其轻