問題描述

所以我嘗試在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.

這篇關于為傳單中的標記分配 ID的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！