我在地图上有一堆传单标记.每个标记都保存在阵列标记中.标记是动态创建的(在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中).计划是在单击Feed中相应的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),但它不起作用.
如何在标记上触发点击事件?
还有其他方法可以更改标记图标吗?
解决方法:
要模拟鼠标单击,您可以在标记上使用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/leaflet@1.2.0/dist/leaflet.css" 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>