在单张中为标记指定ID [英] Assign ID to marker in leaflet
问题描述
因此，我尝试在foursquare上实现结果： https://foursquare.com/探索？cat = drinks& mode = url& near = Paris ，当你点击地图上的标记时，它会滚动屏幕右侧的餐厅列表到ad hoc餐厅，并通过CSS突出显示它。相反，当您点击列表中的餐厅时，它会在地图上突出显示。
我使用skobbler /传单。我想我可以通过修改动态CSS，如下例所示： http://jsfiddle.net/gU4sw/7/ + a滚动到目标脚本已在页面中的位置。
但是，为了实现这一点，我需要在标记（以下2个标记）中分配一个ID：
var marker = L.marker（[52.52112，13.40554]）。addTo（map）;
marker.bindPopup（Hello world！< br>我是popup1。，{offset：new L.Point（-1，-41）}）。
var marker = L.marker（[52.53552，13.41994]）。addTo（map）;
marker.bindPopup（Hello world！< br>我是popup2。，{offset：new L.Point（-1，-41）}）openPopup问题是：如何分配一个标记ID以触发我的html中相应元素的css更改？
$ b <页面
我对JS的了解非常有限，但可能有一个很好的和容易的解决方案，thx
我一直在寻找一个很好的方法来做到这一点，据我所知，仍然没有内置的方式（使用传单）给一个标记ID 。 我知道回答这个问题有点迟了，但希望它能帮助那些绊倒这个问题的人。就我可以告诉这里有两个主要问题：
问题＃1：
除非您将标记保存到对象或映射，下面描述，没有容易的编程方式来访问它们。
问题＃2：
当用户点击地图时，用户单击地图中的标记INSIDE，没有内置的方式检索该标记的ID，然后使用它突出显示相应的元素或触发地图外部的动作。
解决方案
使用这些选项中的一个或多个将有助于解决上述问题。我将从上一个答案中提到的那个开始。以下是工作笔，其中包含以下所有代码。
选项＃1：
使用硬编码或动态ID将每个标记保存在对象内
//创建或检索数据
var data = [
{
name：'Bob'，
latLng：[41.028，28.975]，
id：'2342fc7'
}，{...}，{...}
];
//添加一个保存标记的对象
var markers = {};
//循环遍历数据
for（var i = 0; i
//创建并保存对每个标记的引用
markers [person.id] = L.marker（person.latLng，{
...
} ）.addTo（map）;
}
与其他答案类似，您现在可以使用 -
var marker = markers.2342fc7; //或标记['2342fc7']
选项2： / p>
虽然传单没有为标记提供内置的'id'选项，但您可以通过访问直接向元素添加一个ID。 _icon 属性：
//创建并保存对每个标记的引用
markers [person.id] = L.marker（person.latLng，{...}）addTo（map）;
//添加ID
标记[person.id] ._ icon.id = person.id;
现在，当您处理点击事件时，很容易获得该标记的ID：
$（'。leaflet-marker-icon'）。on（'click'，function（e）{
//使用事件找到点击的元素
var el = $（e.srcElement || e.target），
id = el.attr（'id'）;
alert（'这里是标记ID：'+ id +'。根据需要使用它。'）
}）;
选项＃3：
另一种方法是使用 layerGroup 接口。它提供了一个方法， getLayer ，听起来像是完美的获取我们的标记使用ID。但是，目前，Leaflet 不提供任何方式指定自定义ID或名称。 Github上的问题讨论了如何完成此操作。但是，您可以获得并保存任何标记的自动生成的ID（或 iLayer ），如下所示：
var group = L.layerGroup（）
people.forEach（person => {
// ... create marker
group.addLayer（marker）;
person.marker_id = group.getLayerId（marker）
}）
现在我们将每个标记的ID与数据数组中的每个后备对象保存在一起，我们可以稍后轻松地获取标记：
group.getLayer（person.marker_id）
$ b b
请参阅这支笔了解完整示例...
选项＃4：
这是最简单的方法，如果你有时间，将扩展传单的标记类，以处理您的个人需要干净。您可以向选项添加标识，也可以将自定义HTML插入到具有标识/类的标记中。有关详情，请参阅文档。
您也可以使用 circleMarker ，在路径选项，你会看到一个className的选项，这对于类似标记的样式组是很好的。
样式：
几乎忘记了您的原始问题是为了造型的目的。只需使用ID访问单个元素：
.leaflet-marker-icon＃2342fc7 {...}
结论
功能组提供了另一种伟大的方式来与标记进行交互。这是一个问题，讨论这有点。您可以随意修改，或者先先或第二支笔，如果我错过了某些内容，请发表评论。
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.
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.
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();
Question is: How can I assign an marker ID to trigger css change in the corresponding element within my html page?
My knowledge of JS is very limited, but may be there's a nice and easy solution out there, thx
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:
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.
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.
Solutions
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.
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']
Option #2:
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;
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.')
});
Option #3:
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)
})
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...
Option #4:
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.
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.
Styling:
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 { ... }
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.
这篇关于在单张中为标记指定ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
