javascript - Node +Jade+Express+Sqlite : How can I add a MiniMap to a Leaflet Map?-6ren

javascript - Node +Jade+Express+Sqlite : How can I add a MiniMap to a Leaflet Map?

转载作者：行者123 更新时间：2023-12-03 08:12:18

25

4

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

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

根据Minimap的文档，你不能再次使用同一个图层对象，因为这会混淆两个 map 控件，所以，这就是为什么需要创建一个新的对象。

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

有什么想法吗？

最佳答案

除了其他几个错误之外，可能导致迷你 map 失效的错误是缺少 osmAttrib 变量的定义。

其他错误:

缺少头部结束标签。
使用 addLayer 并以字符串作为参数，而不是 Layer 对象。

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

关于javascript - Node +Jade+Express+Sqlite : How can I add a MiniMap to a Leaflet Map?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34091482/

25

4

0

文章推荐： javascript - 表单未使用 Angular 清除 $.ajax 成功函数中的值

文章推荐： python - 如何在Python中创建和清空链表节点？

文章推荐： shell - 该命令有什么问题...您能找到此命令中的错误吗？

文章推荐： javascript - 从 geolocation-db.com 获取 IP 时出错

sqlite - 通过将 SQLite 表拆分为两部分并与外键链接来重构 SQLite 表
我正在开发一个 SQLite 数据库。数据库已经填满了，但我想重构它。这是我需要做的一个示例: 我目前有一张 table : CREATE TABLE Cars (ID INTEGER PRIMARY
sqlite - Mono + SQLite + Dapper SQLite 插入期间出现异常
我正在使用 Mono、SQLite、Dapper 和 Dapper 扩展。我可以从数据库中读取数据，但插入不起作用。我正在使用 sqlite 的 Mono 驱动程序。错误并不能提供太多信息，至少对我
sqlite - 在 SQLite.cs 中找不到类型或命名空间 'Sqlite'
我有一个使用 SQLite 的 Windows Phone 8 应用程序。该应用程序具有许多数据库功能，并包含一个 sqlite 数据库文件，在运行该应用程序时，该文件将被复制到本地文件夹并进行访问。
sqlite - sqlite 索引的排序顺序
为 sqlite 创建索引时有排序顺序。 https://sqlite.org/lang_createindex.html Each column name or expression can be
sqlite - SQLite，删除表时需要执行任何管家任务吗？
顾名思义，我怀疑如果有一些引用被删除的表会发生什么，例如表的某些字段的索引。 SQLite是否会自动处理？在执行drop命令之前，数据库所有者是否应注意任何实例？最佳答案我认为不需要家政服务。 S
sqlite - SQLite COUNT作为类型转换
我想知道是否有可能将从计数中获得的整数转换为REAL 类似于以下内容（尽管这不起作用） SELECT CAST (COUNT (ColumnA) AS Count) AS REAL) FROM Tab
sqlite - SQLite-更新命令产生空值
我无法在SQLite数据库上执行一些更新。我正在Windows上使用SQLite 3 Shell。我正在运行以下命令： update resovled_chrom_counts set genus
sqlite - SQLite:表约束和触发器
我知道SQLite中的触发器顺序是不确定的（您不能确定将首先执行哪个触发器），但是表约束和触发器之间的关系又如何呢？我的意思是，假设我在一个列中有一个UNIQUE（或CHECK）约束，并且在该表上有
sqlite - Sqlite 子查询的问题
我的 CustomTags 表可能有一系列“临时”记录，其中 Tag_ID 为 0，并且 Tag_Number 将有一些五位数的值。定期，我想清理我的 Sqlite 表以删除这些临时值。例如，我可
sqlite - SQLite:如何将顺序限制的SQL与左联接查询结合在一起
我有A，B，C和D的记录。我的SQL1 SELECT * FROM main_table order by main_table.date desc limit 2返回A和B。我的SQL2 SEL
sqlite - SQLite-删除十进制的尾随零
select round（836.0）返回836.0 我如何删除sqlite查询中的尾随零。 836.00应该是836 836.440应该是836.44 最佳答案如果需要836.44，则需要十进制返
sqlite - SQLite FTS4代码段参数格式
我正在研究RQDA中的文本，并且正在使用Firefox SQLite Manager访问数据库，以便可以更轻松地搜索文件。我创建并填充了虚拟表： CREATE VIRTUAL TABLE texts
sqlite - 通过聚合联合多个表和组(SQlite)
我有这样的数据: table1 id | part | price 1 | ox900 | 100 2 | ox980 | 200 和 table2 id | part | price 1
sqlite - SQLite Insert在BlackBerry上静默失败
我正在尝试将一些数据插入现有的SQLite表中。该表和数据库是使用相同的API创建的，但是由于某种原因，插入操作无效，并且从不给我任何错误消息。我正在BlackBerry 9550模拟器上对此进行测
sqlite - SQLite。根据另一列的值插入一个值
例如，我在名为SALARY的列中插入一个值。如果插入的值大于1000，我想将字符串HIGH插入到RANK列中，否则将插入LOW中。我可以使用SQLite做到吗？最佳答案在插入之前使用触发器，然后
sqlite - sqlite:唯一覆盖指数
假设我有一个包含三列A，B，C的表t1，其中（A，B）包含唯一键（具有数十万行）。由于90％的查询将采用SELECT C FROM t1 WHERE A =？和B = ?，我想我要为A，B和C提供覆盖
sqlite - SQLite:如何从拆分字符串中获取最大值
在一个SQLite3数据库中，我有一个表“ projects”，其id字段由以下方式组成： [user id]_[user's project id] 例如，用户ID = 45，这是一些数据： 45_
sqlite - SQLite-如何在保留子行的同时删除父行？
我了解PRAGMA foreign_key和ON DELETE RESTRICT/NO ACTION的概念，但是我面临的是另一种情况。我需要删除一个父行，但保持与之关联的子行。例如： CREATE
sqlite - SQLite:如何比较两个表？
我的c＃应用程序从Web服务1读取文件列表，并将完整的文件名插入table1，然后从第二个Web服务读取list并将它们插入到table2。这些表具有相同的结构，如下所示： create table
sqlite - SQLite-根据另一个表的列中的值更新列
我在以下情况下尝试将Record1的ID更新为Record2的ID：两个表中的名称相同，并且在Record2中权重更大。记录1 | ID | Weight | Name | |----|----

首页

博学

6Ren·AI

商城

javascript - Node +Jade+Express+Sqlite : How can I add a MiniMap to a Leaflet Map?