问传单地图进度条
EN

Stack Overflow用户

提问于 2015-07-14 15:38:55

回答 1查看 2.1K关注 0票数 0

在等待图层在地图上呈现时，我如何在地图进度栏上显示居中(带有%)？

这是我的代码：

<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>

谢谢!

javascript

progress-bar

leaflet

回答 1

Stack Overflow用户

发布于 2015-07-14 17:34:54

目前还没有针对这一问题的内置或插入解决方案。所以

如果进度条和%并不那么重要，并且您主要想告诉用户正在加载什么东西，您可能想看看Leaflet.Spin，这是一个用于在地图上显示旋转图标的插件。
如果你真的想要一个进度条，一个很好的起点可能是markercluster-plugin.。50k例有这样一个进度条。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31411209

复制

相似问题

问传单地图进度条
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单地图进度条EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单地图进度条
EN