Javascript 在openstreemapleaflet中，当鼠标在 map 上移动时，如何在小工具提示中实时显示坐标

发布于01月04日

我希望当我在 map 上移动鼠标时，它会像一个小工具提示气球一样显示鼠标光标上的实时坐标，例如:35.56，56.765

我在我的Wix站点中try 了这个代码，但它显示了 map ，但鼠标的坐标不起作用，没有显示任何内容.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
   <style>
      body, html, #map {
         height: 100%;
         margin: 0;
      }
   </style>
</head>
<body>
   <div id="map"></div>

   <script>
      var map = L.map('map').setView([32.921, 39.562], 10);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      var marker = L.marker([32.921, 39.562]).addTo(map);
      marker.bindPopup("<b>Hello World!</b><br>This is a customizable popup.").openPopup();

      // Create a tooltip to show coordinates
      var tooltip = L.tooltip({
         permanent: true,
         direction: 'bottom',
         opacity: 0.7
      });

      // Add the tooltip to the map
      tooltip.addTo(map);

      // Event listener for mousemove
      map.on('mousemove', function (e) {
         var latlng = e.latlng;
         tooltip.setLatLng(latlng).setContent('Coordinates: ' + latlng.lat.toFixed(6) + ', ' + latlng.lng.toFixed(6));
      });
   </script>
</body>
</html>

<html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <style> body, html, #map { height: 100%; margin: 0; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([32.921, 39.562], 10); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var marker = L.marker([32.921, 39.562]).addTo(map); marker.bindPopup("<b>Hello World!</b><br>This is a customizable popup.").openPopup(); // Create a marker for displaying the tooltip var tooltipMarker = L.marker([0, 0], { opacity: 0 }).addTo(map); // Event listener for mousemove map.on('mousemove', function (e) { var latlng = e.latlng; tooltipMarker.setLatLng(latlng); tooltipMarker.bindTooltip('Coordinates: ' + latlng.lat.toFixed(6) + ', ' + latlng.lng.toFixed(6), { permanent: true, direction: 'bottom' }).openTooltip(); }); </script> </body> </html>

Javascript 在openstreemapleaflet中，当鼠标在 map 上移动时，如何在小工具提示中实时显示坐标

推荐答案

Javascript相关问答推荐

JS生成具有给定数字和幻灯片计数的数组子集

使用TMS Web Core中的HTML模板中的参数调用过程

如何使用侧边滚动按钮具体滚动每4个格？

vscode扩展-webView Panel按钮不起任何作用

类型脚本中只有字符串或数字键而不是符号键的对象

如何在Angular中插入动态组件

用JavaScript复制C#CRC 32生成器

JS—删除对象数组中对象的子对象

我的角模板订阅后不刷新'

rxjs插入延迟数据

基于props 类型的不同props ，根据来自接口的值扩展类型

当我try 将值更改为True时，按钮不会锁定

使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

从异步操作返回对象

使用静态函数保存 node 前的钩子

不允许在对象文本中注释掉的属性

react ：图表负片区域不同 colored颜色

单击时同时 Select 和展开可访问的行

Js问题：有没有办法将数据从标记表转换成图表？