問題描述

我在地圖上有一堆傳單標記.每個標記都保存在數組 markers 中.標記是動態創建的(在 ajax 調用期間).

I have a bunch of leaflet markers on the map. Each marker is held in array markers. The markers are created dynamically (during an ajax call).

var markers = [];
.
.
var marker = L.marker([mar.lat, mar.lng], {
  // ...build the marker...
}
marker._leaflet_id = mar.id; // give the marker an id corresponding to the id of its corresponding div
var myHoverIcon = L.icon({
  iconUrl: mar.imgUrl,
  iconSize: [40, 40],
  popupAnchor: [0, 0]
});
marker.on('click', function(e) {
  alert('Marker clicked!');
  marker.setIcon(myHoverIcon);
});
.
.
markers.push(marker);

每個標記都有一個對應于特定 div 的 id(存儲在 div 上的 data-mess_id 中).計劃是在點擊提要中相應的 div 時更改標記的圖標.

Each marker has an id corresponding to a particular div (stored in data-mess_id on the div). The plan is to change the marker's icon when its corresponding div in the feed is clicked on.

$('#feed').on('mouseover', '.message', function() {
  var cssid = $(this).attr('data-mess_id').toString();
  var baz = $.grep(markers, function(m) {
    return (m._leaflet_id == cssid);
  });
  baz[0].trigger('click');   // doesn't work 
  alert(baz[0].getLatLng()); // does work

  // this also does not work:
  var myHoverIcon = L.icon({
    iconUrl: baz[0].imgUrl,
    iconSize: [40, 40],
    popupAnchor: [0, 0]
  });
  baz[0].setIcon(myHoverIcon);

});

除了最后一點，一切都很好.我只是無法在標記上觸發點擊事件.我肯定有正確的標記，因為 baz[0].getLatLng() 正在工作.但是 baz[0].trigger('click') 不起作用.

It's all working fine except for the final bit. I just can't trigger a click event on the marker. I definitely have the correct marker because baz[0].getLatLng() is working. But baz[0].trigger('click') doesn't work.

我嘗試動態創建一個新圖標 (myHoverIcon) 但它不起作用.

I tried creating a new icon dynamically (myHoverIcon) but it doesn't work.

如何在標記上觸發點擊事件?

How do I trigger a click event on the marker?

還有其他方法可以更改標記圖標嗎?

Is there another way to change the marker icon?

推薦答案

要模擬鼠標點擊，您可以使用 fire 方法(繼承自 Evented.fire) 在標記上:

To emulate a mouse click, you can use the fire method (inherited from Evented.fire) on the marker :

marker.fire('click');

還有一個演示

var map = L.map('map').setView([0, 0], 12);

var icon = L.icon({
  iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png'
});
var marker = L.marker([0, 0], {icon: icon})
  .addTo(map);
  
  
var myHoverIcon = L.icon({
  iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png'
});
  
  
marker.on('click', function(e) {
  marker.setIcon(myHoverIcon);
});

document.querySelector('button').addEventListener('click', function() {
  marker.fire('click');
});

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

button {position: absolute; left:10 px; top: 70px;}

<link rel="stylesheet"  integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
   
<div id='map'></div>
<button>Click me</button>

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