为传单中的标记分配 ID

2022-01-12 00:00:00 leaflet javascript html css maps

所以我尝试在foursquare上实现结果:https://foursquare.com/explore?cat=drinks&mode=url&near=Paris 当您点击地图上的标记时，它会滚动浏览屏幕右侧列出的餐馆到临时餐厅，并通过 CSS 突出显示它.相反，当您点击列表中的餐厅时，它会在地图上突出显示它.

So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrolls through the listed of restaurants on the right -hand side of the screen to the ad hoc restaurant, and highlights it through CSS. Conversely, when you click on the restaurant on the list, it highlights it on the map.

我正在使用 skobbler/传单.我想我可以通过动态修改 CSS 来实现这一点，如下例所示:http://jsfiddle.net/gU4sw/7/ + 滚动到页面中已经存在的目标脚本.

I am using skobbler/leaflet. I think I can achieve this by amending dynamically CSS as shown in this example: http://jsfiddle.net/gU4sw/7/ + a scroll to destination script already in place in the page.

然而，为了实现这一点，我似乎需要在标记内分配一个 ID(下面的 2 个标记):

To achieve this however, it looks like I need to assign an ID within the markers (2 markers below): 

var marker = L.marker([52.52112, 13.40554]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup1.", { offset: new L.Point(-1, -41) }).openPopup();

var marker = L.marker([52.53552, 13.41994]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup2.", { offset: new L.Point(-1, -41) }).openPopup();

问题是:如何分配标记 ID 以触发我的 html 页面中相应元素的 css 更改?

Question is: How can I assign an marker ID to trigger css change in the corresponding element within my html page?

我对 JS 的了解非常有限，但可能有一个很好且简单的解决方案，谢谢

My knowledge of JS is very limited, but may be there's a nice and easy solution out there, thx

推荐答案

我一直在寻找一个很好的方法来做到这一点，据我所知，仍然没有内置的方法(使用传单)给一个标记一个ID.我知道我回答这个问题有点晚了，但希望它能帮助其他偶然发现这个问题的人.据我所知，这里有两个主要问题:

I've been looking for a nice way to do this and as far as I can tell there is still no built-in way (using leaflet) to give a marker an ID. I know I'm a bit late to answering this but hopefully it will help others who stumble upon this question. As far as I can tell there are two main issues here:

问题 #1:除非您将标记保存到对象或地图中，如下所述，否则以后没有简单的编程方式可以访问它们.例如 - 用户点击地图外部的东西，对应于地图内部的标记.

Problem #1: Unless you save your markers to an object or map, described below, there is no easy programmatic way of accessing them later on. For example - A user clicks something OUTSIDE the map that corresponds to a marker INSIDE the map.

问题 2:当用户单击地图内部的标记时，没有内置方法可以检索该标记的 ID，然后使用它来突出显示相应的元素或触发地图外部的操作.

Problem #2: When a user clicks on a marker INSIDE the map, there is no built in way to retrieve the ID of that marker and then use it to highlight a corresponding element or trigger an action OUTSIDE the map.

使用其中一个或多个选项将有助于解决上述问题.我将从上一个答案中提到的那个开始.这是工作笔，它包含以下所有代码.

Using a one or more of these options will help address the issues described above. I'll start with the one mentioned in the previous answer. Here is the working pen, which holds all the code found below.

选项 #1:使用硬编码或动态 ID 将每个标记保存在对象内 -

Option #1: Save each marker, using a hardcoded or dynamic ID, inside an object - 

// Create or retrieve the data
var data = [
    {
      name: 'Bob',
      latLng: [41.028, 28.975],
      id: '2342fc7'
    }, {...}, {...}
];

// Add an object to save markers
var markers = {};

// Loop through the data
for (var i = 0; i < data.length; i++) {
  var person = data[i];

  // Create and save a reference to each marker
  markers[person.id] = L.marker(person.latLng, {
    ...
  }).addTo(map);
}

与其他答案类似，您现在可以使用 - 访问单个标记

Similar to the other answer you can now access a single marker by using - 

var marker = markers.2342fc7; // or markers['2342fc7']

选项 #2:

虽然传单没有为标记提供内置的id"选项，但您可以通过访问 ._icon 属性直接将 ID 添加到元素:

While leaflet doesn't provide a built-in 'id' option for markers, you can add the an ID to the element directly by accessing ._icon property: 

// Create and save a reference to each marker
markers[person.id] = L.marker(person.latLng, {...}).addTo(map);

// Add the ID
markers[person.id]._icon.id = person.id;

现在，当您处理点击事件时，很容易获得该标记的 ID:

Now when you handle click events, it's easy as pie to get that marker's ID: 

$('.leaflet-marker-icon').on('click', function(e) {
   // Use the event to find the clicked element
   var el = $(e.srcElement || e.target),
       id = el.attr('id');

    alert('Here is the markers ID: ' + id + '. Use it as you wish.')
});

选项 #3:

另一种方法是使用 layerGroup 接口.它提供了一个方法，getLayer，听起来就像使用 ID 获取我们的标记是完美的.但是，目前，Leaflet 不提供任何方式来指定自定义 ID 或名称.Github 上的这个 issue 讨论了应该如何做到这一点.但是，您可以像这样获取并保存任何标记(或 iLayer )的自动生成 ID:

Another approach would be use the layerGroup interface. It provides a method, getLayer, that sounds like it would be perfect get our markers using an ID. However, at this time, Leaflet does not provide any way to specify a custom ID or name. This issue on Github discusses how this should be done. However you can get and save the auto-generated ID of any Marker (or iLayer for that matter) like so: 

var group = L.layerGroup()

people.forEach(person => {
    // ... create marker
    group.addLayer( marker );
    person.marker_id = group.getLayerId(marker)
})

现在我们已经将每个标记的 ID 与数据数组中的每个支持对象一起保存，我们稍后可以轻松地获取标记，如下所示:

Now that we have every marker's ID saved with each backing object in our array of data we can easily get the marker later on like so: 

group.getLayer(person.marker_id)

有关完整示例，请参阅 这支笔...

See this pen for a full example...

选项 #4:

如果您有时间，最简洁的方法是扩展传单的标记类以干净地处理您的个人需求.您可以向选项添加 id 或将自定义 HTML 插入具有您的 id/class 的标记中.有关这方面的更多信息，请参阅 文档.

The cleanest way to do this, if you have the time, would be to extend the leaflet's marker class to handle your individual needs cleanly. You could either add an id to the options or insert custom HTML into the marker that has your id/class. See the documentation for more info on this.

您也可以使用 circleMarker，在 路径选项，你会看到 className 有一个选项，可以很好地设置相似标记组的样式.

You can also you use the circleMarker which, in the path options, you will see has an option for className which can be nice for styling groups of similar markers.

样式:

几乎忘记了您最初的问题是为了造型而提出的......只需使用 ID 来访问各个元素:

Almost forgot that your original question was posed for the purpose of styling... simply use the ID to access individual elements:

.leaflet-marker-icon#2342fc7 { ... }

结论

我还将提到图层和功能组提供了另一种与标记交互的好方法.这是一个 问题 讨论这一点.随意修改或分叉 first 或 第二支笔 如果我遗漏了什么，请发表评论.

Conclusion

I'll also mention that layer and feature groups provide another great way to interface with markers. Here is a question that discusses this a bit. Feel free to tinker with, or fork either the first or second pen and comment if I've missed something.

相关文章