个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当您使用 Leaflet 的 panTo 方法单击缩略图时，我正在尝试平移和缩放到 map 的一部分。由于某种原因它不起作用。有人可以帮忙排除故障吗？这是我的代码和现场演示:
现场演示:jsfiddle
相关代码:
var jumpKabul = L.Control.extend({
options: { position: 'bottomleft' },
onAdd: function(map){
var container = L.DomUtil.create('div', 'test');
container.innerHTML = '<div id="map-navigation" class="map-navigation"><a href="#" data-zoom="12" data-position="34.51702396789498,69.11893844604492"><img src="https://placehold.it/150x150"></a></div>';
return container;
}
});
map.addControl(new jumpKabul());
document.getElementById('map-navigation').onclick = function(e) {
var pos = e.target.getAttribute('data-position');
var zoom = e.target.getAttribute('data-zoom');
if (pos && zoom) {
var loc = pos.split(',');
var z = parseInt(zoom);
map.panTo(loc, z, {animation: true});
return false;
}
}
最佳答案
事件目标不是您期望的那样，它是对 img 的引用，而不是包装 div 元素。您可以通过将 e.target 记录到控制台并检查其内容来发现这一点。如果您使用e.target.parentElement，那就没问题。下一个错误是您向 panTo 函数添加了一个不存在的缩放参数:
panTo( latlng, options? )
http://leafletjs.com/reference.html#map-panto
此外，您还没有充分发挥 L.Control 类的潜力。您仍然在类之外做繁琐的工作，附加事件处理程序和实际的事件处理等。尝试这样的事情，这样您就可以将所有逻辑包含在自定义控件类中(在代码片段中使用 Leaflet 但可以工作)也使用 Mapbox.js):
var map = new L.Map('leaflet', {
'center': [0, 0],
'zoom': 0,
'layers': [
new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
'attribution': '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
})
]
});
L.Control.Navigation = L.Control.extend({
options: {
position: 'bottomleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'map-navigation'),
link = L.DomUtil.create('a', 'map-navigation-link', container),
img = L.DomUtil.create('img', 'map-navigation-image', link);
link.href = '#';
// Unsure as why one would need the data attribs
// Since we could directly use the handler below
link.dataset.lat = 34.51702396789498;
link.dataset.lng = 69.11893844604492;
link.dataset.zoom = 12;
img.src = '//placehold.it/150x150';
L.DomEvent.addListener(link, 'click', function (e) {
// Using setView because it has zoom
map.setView([
link.dataset.lat,
link.dataset.lng
], link.dataset.zoom);
});
return container;
}
});
map.addControl(new L.Control.Navigation());body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<title>Leaflet 0.7.7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</body>
</html>关于javascript - Leaflet:如何在自定义控件中设置panTo方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35672613/
25
4
0
我想实现自定义搜索，但遇到了一个麻烦。我需要将 UIButton、SearchBar 组合在一个控件中，以便我可以通过指针引用它。然后我将向该组合控件动态添加更多 UIbutton。最重要的是，我想将
它没有在我的方法中执行 if block 中的语句 母版页:- 页面加载事件:- Control c = new Control(); DoSomething(c); 我的方法:- protecte
ComboBox 控件有一个 setConverter 方法，请参阅 JavaFX ComboBox - Display text but return ID on selection举个例子。我正在
我没有找到任何包含用于标记化(标记)文本输入的控件的 wpf 库。也许我找不到库，因为我错误地调用了这个组件。怎么叫或者哪里有这样的库？ 最佳答案 DevExpress WPF 库包含多个数据编辑控件
是否有 Silverlight 控件允许您输入文本并将其突出显示为代码？ 例如: foreach (client in Clients){ client.Save();} would become
我有以下用户控件 a) Panel.ZIndex="99999999" 是否是将此控件设置为该控件中 TopMost 的正
是否可以在 Windows 窗体中使用 C# 在窗体加载时隐藏所有特定控件，例如标签或按钮，然后选择显示我不想显示的那些？ 我有一个包含很多按钮和标签的程序，但我只想在加载时显示一两个，我觉得对每个标
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Duplicating components at Run-Time 我有一个TMyControl ( Contro
我正在尝试在 Delphi 中编写一个 dll 库，其中包含一个创建 TFrame 后代实例并返回它的函数。但是当我在应用程序中导入这个函数时，每次调用它时，我都会得到一个异常，例如“'xxx'控件没
是否有 Win32 API 调用来确定哪些窗口和/或控件在特定坐标和/或鼠标下可见？ 最佳答案 您可以使用GetWindowFromPoint 。它将返回窗口句柄，以便您可以使用 GetClassNa
我需要在编辑控件中输入以下公式: 公式是在 MS Word 中制作的。尝试将其复制/粘贴到编辑控件(单行或多行)后，我得到 M 0.33 Q10T9.1-9.7。 当我输入这个时，我正在研究 Rich
我只是想成功地将它添加到我的窗口中，但这却出奇地困难。 我已经尝试过 #include "windef.h" #include "winbase.h" #include "initguid.h" #i
我希望能够使用 google maps api v3 拥有自己的“街景”按钮。单击按钮时，我希望它根据我的标记经纬度加载街景。然后我希望按钮更改为“返回 map ”，然后再次加载默认 map View
我目前正在用 PHP 开发(另一个)开源 CMS，我想使用 javascript 控件，尤其是管理面板。问题是，是否有任何具有 PHP 接口(interface)的开源、可自由分发的控件(用于创建 j
我为其编写软件的产品之一是会计类应用程序。它用 C++ 编写，使用 C++ Builder 和 VCL 控件，连接到运行在 Linux 上的 PostgreSQL 数据库。 PostgreSQL 数据
我使用 Key Listener 来读取用户的输入，但我遇到了问题。首先，我读到 JTextField“请输入您的姓名”。如果用户输入一个名字，例如 John，它将更改为 John。但是，如果用户输入
我正在尝试对齐数据表列中的复选框(h=center，v=middle) ... 但复选框仍然显示在错误的位置(见附图)
我有一个包含统计信息的 JSON 数据树: { prefix: "a", count: 20, children: [ { prefix: "a:b", c
我在 Photoshop 中设计了一个模型，我打算将它应用到我的产品目录的 ListView 控件中，但它似乎没有正确显示(未对齐？)，我希望这里的人可以像我一样指出我的错误试图弄清楚无济于事。 预期
您是使用 ASP.NET 控件还是仅使用带有 CSS 的 HTML？ 我在 TextBox 和 DropDownList 的宽度方面遇到了一些问题。在不同的浏览器中，宽度会有所不同，控件的大小也不会相
我是一名优秀的程序员,十分优秀！