传单:如何在鼠标光标旁边显示纬度/经度? [英] Leaflet: how to display lat/lng next to mouse cursor?
问题描述
我想在 .这个选项也应该可以切换为开/关.
I would like to display the current lat/lng on a map immediately next to the mouse (hand) cursor in Leaflet in . This option should also be toggleable as on/off.
一种选择是定义一个 CSS 框，该框将显示在地图顶部的光标旁边(该框仅在打开切换时可见).该框需要显示当前的纬度/经度以及随光标移动.
One option would be to define a css box which would be displayed on top of the map next to the cursor (the box would be visible only when the toggle is on). The box would need to display the current lat/lng as well as move along with the cursor.
不确定如何在实践中执行此操作，我们将不胜感激.
Not sure how to do this in practice and any help on this would be greatly appreciated.
推荐答案
您可以编写一个处理程序，在 mouseover/mouseout 时打开/关闭弹出窗口并在 mousemove 时更新它:
You could write a handler that opens/closes a popup on mouseover/mouseout and updates it on mousemove:
L.CursorHandler = L.Handler.extend({
addHooks: function () {
this._popup = new L.Popup();
this._map.on('mouseover', this._open, this);
this._map.on('mousemove', this._update, this);
this._map.on('mouseout', this._close, this);
},
removeHooks: function () {
this._map.off('mouseover', this._open, this);
this._map.off('mousemove', this._update, this);
this._map.off('mouseout', this._close, this);
},
_open: function (e) {
this._update(e);
this._popup.openOn(this._map);
},
_close: function () {
this._map.closePopup(this._popup);
},
_update: function (e) {
this._popup.setLatLng(e.latlng)
.setContent(e.latlng.toString());
}
});
L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);
var map = new L.Map('leaflet', {
center: [0, 0],
zoom: 0,
cursor: true,
layers: [
new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
})
]
});body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<title>Leaflet 1.0.3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</script>
</body>
</html>在上面的例子中，默认情况下，处理程序是通过由处理程序创建的 L.Map 的 cursor 选项启用的:
In the above example the handler is enabled by default through the cursor option of L.Map which get created by the handler:
var map = new L.Map(..., {
cursor: true
});
如果您忽略该选项，默认情况下它是禁用的，您可以通过 map.cursor 的方法启用/禁用它:
If you leave out that option it's disabled by default and you can enable/disable it through methods of map.cursor:
map.cursor.enable();
map.cursor.disable();
您可以将其封装在一个简单的控制按钮或其他东西中，然后就完成了.
You can wrap that in a simple control button or something and you're done.
这篇关于传单:如何在鼠标光标旁边显示纬度/经度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
