渲染地图时显示旋转的LEAFLET Show

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>

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

<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.spin(true);
            setTimeout(function () {
                map.addLayer(tileLayer);    
                map.spin(false);
           }, 3000);
    }
</script>

Answer 1

在加载leaflet.js之后加载旋转库：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

<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>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script
<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>
...