Question

我使用Node + Jade + Express + Sqlite构建了一个地图。我正在尝试使用插件添加小地图。我添加了一个函数来显示它，但没有任何反应。这是我正在使用的代码

HTML //这里是我的html代码，我在加载图层时使用旋转，加载小地图时使用函数，但小地图不会显示。

根据Minimap的文档，您不能再使用相同的图层对象，因为这会混淆两个地图控件，因此，这就是创建新对象的原因。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheets/leaflet-0.7.7/leaflet.css">
<body>
<input value=" + " onclick="showLayer('outdoors','http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')" id="addOutdoors" type="button"> 
<div id="map" style="width: 100%; height: 800px"></div>

<script src="./javascripts/leaflet-0.7.7/leaflet.js"></script>

<!-- Spin's include files: https://github.com/makinacorpus/Leaflet.Spin -->
<!-- MiniMap's include files: https://github.com/Norkart/Leaflet-MiniMap -->

<script>
var map;
var mbTiles = new L.tileLayer('tiles?z={z}&x={x}&y={y}', {
tms: true,
attribution: 'test',
opacity: 0.7
});
map = new L.Map("map",{
fullscreenControl: true,
zoom: 3,
center: [-33.49702,-70.65462],
layers: [mbTiles]
}); 


function showLayer(layerName,layerURL){
    tileLayer = L.tileLayer(layerURL, {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    }); 
    showLoading(layerName,layerURL);    
}   

function showLoading(layerName, layerURL)   { //this function show the spin image while loads the layer
    map.spin(true);
    setTimeout(function () {
        map.addLayer(layerName);
        map.spin(false);
    }, 3000);   
    showMiniMap(layerURL);
} 

function showMiniMap(layerURL){//this function must show the minimap
    var osm2 = new L.TileLayer(layerURL, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
    var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
}
</script>
</body>
</html>

有什么想法吗？

Answer 1

除了其他几个错误之外，杀死迷你地图的可能是错误的osmAttrib变量定义。

其他错误：

缺少头部关闭标签。
使用addLayer作为参数，而不是Layer对象。

演示：http://plnkr.co/edit/ipy91EvabCmKAzAQ4yes?p=preview

Node + Jade + Express + Sqlite：如何将MiniMap添加到Leaflet Map？

1 个答案: