如何检测 geojson 何时在 Google 地图中完全加载

发布于 2025-01-13 21:06:55 字数 2672 浏览 5 评论 0原文

我有一个谷歌地图，其中包含加载到地图中的 geojson 。

因为geojson需要2-4秒才能加载，所以我想放一个加载圈。但是，当尝试加载循环时，仅当在加载 geojson 之前加载图块时才会显示地图。等待 geojson 加载的正确生命周期标记是什么？谢谢

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/main.js"></script>
</head>
<body>
<h1>Hex Map</h1>
<div id="map_wrapper">
    <div id="map"></div>
</div>
<div id="mapinfo">Testbox</div>

<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
        src="https://maps.googleapis.com/maps/api/js?key=THEKEY&callback=initMap&v=weekly"
        async
></script>
</body>
</html>

JS:

let map;
var infowindow = null;

function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 30.1572523, lng: -92.0299477},
        zoom: 3,
    });

    google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
        //alert(map.getBounds().getNorthEast().lat());
    });

    map.data.loadGeoJson(
      "hexmap.geojson"
    );

    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        document.getElementById('map').style.opacity = 1;
    })
    map.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1
    })

    // map.data.addListener('mouseover', function(event) {
    //     console.log(event.feature.getProperty('_uid1_'))
    //     document.getElementById('mapinfo').innerHTML = event.feature.getProperty('_uid1_');
    // })

    const constentString = 'hex + '

    map.data.addListener('click', function(event) {
        message = 'hex id: ' + event.feature.getProperty('_uid1_');
        infowindow && infowindow.close();
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(message);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);

    })


}
//"https://drive.google.com/file/d/1v-VZtbbz4H2KiMvkRcc7nL_6JKQqlHwM/view?usp=sharing'"

CSS:

#map {
    height: 600px;
    width:800px;
    opacity:0;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map_wrapper {
    background:url(https://ressio.github.io/lazy-load-xt/dist/loading.gif) center center no-repeat;
    height: 600px;
    width:800px;
}

原文

I have a google maps with a geojson that is loaded into the map.

Because the geojson takes 2-4 seconds to load, I want to put a loading circle.
However, when attempting the loading circle, the map comes up only when the tiles are loaded before the geojson is loaded. What is the proper lifecycle marker for waiting until the geojson is loaded?
Thanks

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/main.js"></script>
</head>
<body>
<h1>Hex Map</h1>
<div id="map_wrapper">
    <div id="map"></div>
</div>
<div id="mapinfo">Testbox</div>

<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
        src="https://maps.googleapis.com/maps/api/js?key=THEKEY&callback=initMap&v=weekly"
        async
></script>
</body>
</html>

JS:

let map;
var infowindow = null;

function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 30.1572523, lng: -92.0299477},
        zoom: 3,
    });

    google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
        //alert(map.getBounds().getNorthEast().lat());
    });

    map.data.loadGeoJson(
      "hexmap.geojson"
    );

    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        document.getElementById('map').style.opacity = 1;
    })
    map.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1
    })

    // map.data.addListener('mouseover', function(event) {
    //     console.log(event.feature.getProperty('_uid1_'))
    //     document.getElementById('mapinfo').innerHTML = event.feature.getProperty('_uid1_');
    // })

    const constentString = 'hex + '

    map.data.addListener('click', function(event) {
        message = 'hex id: ' + event.feature.getProperty('_uid1_');
        infowindow && infowindow.close();
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(message);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);

    })


}
//"https://drive.google.com/file/d/1v-VZtbbz4H2KiMvkRcc7nL_6JKQqlHwM/view?usp=sharing'"

CSS:

#map {
    height: 600px;
    width:800px;
    opacity:0;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map_wrapper {
    background:url(https://ressio.github.io/lazy-load-xt/dist/loading.gif) center center no-repeat;
    height: 600px;
    width:800px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉服软 2025-01-20 21:06:55

loadGeoJson 方法根据文档

  map.data.loadGeoJson('hexmap.json', null, function(features) {
    document.getElementById('spinner_loading').style.display = 'none'; // or something
  });

The loadGeoJson method takes a callback argument as per the documentation

  map.data.loadGeoJson('hexmap.json', null, function(features) {
    document.getElementById('spinner_loading').style.display = 'none'; // or something
  });

回复收藏 0 原文

~没有更多了~