Question

如何在等待地图上渲染图层时，如何在地图进度条（带％）上显示居中？

这是我的代码：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
</head>
<body>
<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">TF.Landscape</a>&nbsp;|<a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')">TF.Outdoors</a>
<div id="map" style="width: 640px; height: 480px"></div>
<progress value="0" max="100"></progress> 

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
    var map;
    var tileLayer;
    function showMap (layerURL) {
        if(!map) { 
          map = L.map('map').setView([19.5, -73], 7); 
        }

        tileLayer = L.tileLayer(layerURL, {
              attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
              maxZoom: 18
            });
        //map.addLayer(tileLayer);  

        map.spin(true);
            setTimeout(function () {
                map.addLayer(tileLayer);    
                map.spin(false);
           }, 3000);


    }
</script>

谢谢！

Answer 1

目前还没有内置或插入式解决方案。所以

如果进度条和％并不那么重要，并且您主要想告诉用户您正在加载的内容可能需要查看{{3这是一个用于在地图上显示旋转图标的插件。
如果你真的想要一个进度条，一个好的起点可能是 markercluster -plugin。 Leaflet.Spin有这样一个进度条。

宣传单地图的进度条

1 个答案: