web-dev-qa-db-ja.com

リーフレットマーカーのクリックをトリガーします

地図上にたくさんのリーフレットマーカーがあります。各マーカーは配列markersに保持されます。マーカーは動的に作成されます（ajax呼び出し中）。

_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がクリックされたときに、マーカーのアイコンを変更します。

_$('#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')は機能しません。

新しいアイコンを動的に作成しようとしましたが（myHoverIcon）、機能しません。

マーカーでクリックイベントをトリガーするにはどうすればよいですか？

マーカーアイコンを変更する別の方法はありますか？

javascriptjqueryleaflet
7
Bazley

マウスクリックをエミュレートするには、マーカーで fire メソッド（ Evented.fire から継承）を使用できます。

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" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
   
<div id='map'></div>
<button>Click me</button>
13
nikoshr