时间戳

首页 > 解决方案 > flyTo() Leaflet - 我如何使用 onclick 监听器在我的地图上飞行

javascript - flyTo() Leaflet - 我如何使用 onclick 监听器在我的地图上飞行

问题描述

我被困在我的代码中。

我正在研究交互式地图，我需要在有问题的坐标上飞行。我怎么知道问题何时处于活动状态，我已经检查了数据的状态，并根据对象的状态将它们放在 Leaflet 的不同层中以在地图上显示。然后我把它们放在我页面上地图正下方的小表格中，其中有具有唯一类、数据经度和数据纬度变量的元素，这些变量总结了我们有多少问题以及它们在哪里。

现在，这就是我的问题所在。我是 JS 和 JQuery 的新手，所以我需要知道如何在点击时访问元素属性，所以当我点击它时，它会执行一个函数 flyTo()，它会存储一个数据经度 + 数据纬度属性到那个功能。

这是一个带有一些 ID 的小代码。

这就是我在 JS 中创建元素的方式：

var newOption = host_name;
var uniqID = brojac;
div.innerHTML += '<td class="' + uniqID + '"value="' + newOption + '" data-longitude= "' + longitude + '" data-latitude="' + latitude + '">' + newOption + '</td>';

这就是我在 HTML 文档中创建表格的方式：

<table id="tablic" style="width:100%">
    <caption>Aktivni problemi su na sljedećim DSLAM-ovima</caption>
    <tr id="red" itemprop='koordinate'></tr>
</table>

抱歉，我无法在其中添加更多信息，因为它是敏感数据，所以是的，希望你们能理解。

还有一件事，即“host_name”，我从一个 JSON 对象中获取该信息，我正在为我的地图创建标记。

希望我能得到一些好的帮助。

标签： javascriptjqueryhtmlleaflet

解决方案

使用 JQuery：

向 td 元素添加一个修复类：

'<td class="tdclass ' + uniqID + '"value="' ....

然后在类上创建一个clicklistener：

$('.tdclass').off('click').unbind('click').click(function(e){ //unbind and off is to remove the existing click events 
console.log(e);
console.log($(this).html());
console.log($(e).html());
    var lat = $(this).attr('data-latitude');
    var lng = $(this).attr('data-longitude');

    map.flyTo([lat,lng]);

});

推荐阅读