小册子中的标记悬停

Question

我想问一下是否有可能悬停未在传单地图中点击标记

这是我的代码

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

这是一张更加了解的图片

Answer 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/

Answer 2

您可以在marker object

上使用title属性

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

另一种方法可能是使用鼠标悬停事件触发openPopup：

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

在this thread

上进行了讨论

Answer 3

可以通过

实现

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

通过L.marker

创建标记