传单中的标记悬停答案

【问题标题】：hover of marker in leaflet传单中的标记悬停
【发布时间】：2017-03-06 23:20:39
【问题描述】：

我想问一下是否可以将鼠标悬停而不点击传单地图中的标记

这是我的代码

leaflet.js

var map = L.map( 'map', {
  center: [20.0, 5.0],
  maxZoom: 16,
  minZoom: 2,
  zoom: 2
})

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: ['a', 'b', 'c']
}).addTo( map )

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

这里是它在传单地图中显示标记和数据的地方

var markers = [
["<b style='font-size:15pt;'> ROXAS CITY CHAPTER </b> <br> <i style='font-size:12pt;'> JUAN DELA CRUZ </i> <br>juan@yahoo.com", 11.58528,122.75111],
["<b style='font-size:15pt;'> MANILA CITY CHAPTER </b> <br> <i style='font-size:12pt;'> PEDRO DELA CRUZ </i> <br>pedro@gmail.com", 14.599512,120.984222],
["<b style='font-size:15pt;'> CANADA CHAPTER </b> <br> <i style='font-size:12pt;'> SIMON DELA CRUZ </i> <br>simon@gmail.com", 53.631611 ,-113.323975]
];
for ( var i=0; i < markers.length; i++ ){
  marker = L.marker ([markers[i][1], markers[i][2]], {icon: myIcon})
  .bindPopup(markers[i][0])

  .addTo( map );
}

这是一张图片，便于理解

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

在标记上添加mouseover 事件并在处理程序中调用openPopup()，如下所示：

marker = L.marker(...);

marker.on('mouseover',function(ev) {
  ev.target.openPopup();
});

或

marker.on('mouseover',function(ev) {
  marker.openPopup();
});

我已经设置了相同的 jsfiddle：http://jsfiddle.net/74g6ts4r/

【讨论】：

【解决方案2】：

你可以在marker object 上使用title属性

marker = L.marker ([markers[i][1], markers[i][2]], {icon: myIcon, title: "any text"})

另一种方法是使用 mouseover 事件触发 openPopup：

    map.on('mouseover',function(ev) {
      ev.layer.openPopup()
    })

在this thread讨论过

【讨论】：

这个悬停吗？

【解决方案3】：

可以通过

marker.on('mouseover',function() {
  marker.openPopup();
});

其中标记是通过 L.marker 创建的

【讨论】：