将标识分配给传单中的标记

Question

所以我尝试在foursquare上实现结果:https://foursquare.com/explore？cat = drink & elode = url & near = Paris当你在地图上标记时,它滚动浏览右边列出的餐馆屏幕的一面到特设餐厅,并通过CSS突出显示.相反,当您点击列表中的餐厅时,它会在地图上突出显示它.

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

然而,要实现这一点,看起来我需要在标记内分配一个ID(下面的2个标记):

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();

问题是:如何在html页面中的相应元素中指定标记ID来触发css更改？

我对JS的了解非常有限,但可能有一个很好的解决方案,那就是

Answer 1

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

问题#1: 除非您将标记保存到对象或地图(如下所述),否则以后无法通过简单的编程方式访问它们.例如 - 用户点击地图外的东西,该地图对应于地图内的标记.

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

解决方案

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

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

// 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);
}

与其他答案类似,您现在可以使用以下方式访问单个标记:

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

选项#2:

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

// 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很容易:

$('.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上的这个问题讨论了如何做到这一点.但是,您可以获取并保存任何标记的自动生成的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)

请参阅此笔以获取完整示例...

选项#4:

如果你有时间,最干净的方法就是扩展传单的标记类,以便干净地处理你的个人需求.您可以向选项添加ID,也可以将自定义HTML插入到具有您的id/class的标记中.有关详细信息,请参阅文档.

您还可以使用circleMarker,在路径选项中,您将看到有一个className选项,可以很好地为类似标记的样式组设置样式.

造型:

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

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

结论

我还要提到的是,图层和要素组提供了另一种与标记交互的好方法.这是一个讨论这个问题的问题.如果我错过了什么,请随意修补,或分叉第一支或第二支笔并发表评论.

Answer 2

一种简单的方法是将所有标记添加到具有唯一ID的列表中.

var markersObject = {};
markersObject["id1"] = marker1;
markersObject["id2"] = marker2;
markersObject["id3"] = marker3;

如果餐馆列表在单个餐馆的html元素中具有与添加的标记的id相对应的属性.就像是:

<a href="#" id="singleRestaurantItem" data-restaurantID="id1" data-foo="bar">Click</a>

然后添加click事件,您将传递餐厅的ID(在本例中为"data-restaurantID")并执行以下操作:

markersObject["passedValueFromTheClickedElement"].openPopup();

这样,一旦您单击列表中的项目,将打开标记弹出窗口,指示地图上餐厅所在的位置.

Answer 3

var MarkerIcon = L.Icon.extend({
    options: {
        customId: "",
        shadowUrl: 'leaf-shadow.png',
        iconSize: [64, 64],
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});

var greenIcon = new MarkerIcon({iconUrl: "/resources/images/marker-green.png"}),            
    redIcon = new MarkerIcon({iconUrl: "/resources/images/marker-red.png"}),
    orangeIcon = new MarkerIcon({iconUrl: "/resources/images/marker-orange.png"});

var mymap = L.map('mapid').setView([55.7522200, 37.6155600], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

// ???????? ??????
L.marker([55.7522200, 37.6155600], {customId:"010000006148", icon: greenIcon, title:setMarkerTitle("010000006148")}).addTo(mymap).on('click', markerOnClick);
L.marker([55.7622200, 37.6155600], {customId:"010053166625", icon: redIcon, title: setMarkerTitle("010053166625")}).addTo(mymap).on('click', markerOnClick);

function markerOnClick(e) {
    var customId = this.options.customId;
    document.location.href = "/view/abonents/" + customId;
}

function setMarkerTitle(customId){
    var result = customId;
    result += "\nline2 ";
    result += "\nline3 ";
    return result;
}