Question

我正在使用leafletjs来创建虚拟旅游地图。我有代码用于突出显示和显示建筑物的信息，但我无法弄清楚如何构建悬停代码。我需要巡视在悬停时显示建筑物的名称，并允许点击以显示细节。

我正在使用代码：

    var map = L.map('map').setView([79,-50], 5);
    var southWest = L.latLng(64, -179.82422),
        northEast = L.latLng(84.9, 39.47461),
        bounds = L.latLngBounds(southWest, northEast);
        map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    L.tileLayer('maps/{z}/{x}/{y}.png', {
        maxZoom: 6,
        minZoom: 3,
        attribution: 
            'Imagery &copy; 2015 College</a>',
        id: 'map-i875mjb7'
    }).addTo(map);

    L.polygon([
        [83.34425, -19.51172], 
        [83.2571, -15.86426], 
        [83.07408, -16.04004], 
        [82.78192, -17.31445], 
        [82.62569, -11.42578], 
        [82.36164, -11.29395], 
        [82.11236, -12.48047], 
        [82.37332, -22.71973], 
        [82.64822, -22.93945], 
        [83.34425, -19.51172]

    ],          {color: 'yellow',
        fillColor: '#fff',
        fillOpacity: 0.0
    }).addTo(map).bindPopup(popupcontent);

显然，我是新手，可以使用任何可以提供的帮助！非常感谢。

Answer 1

小叶的L.Path（L.Polygon从L.Path扩展）确实有小鼠事件。你可以像这样附上他们：

var polygon = new L.Polygon(...);

// Adding eventhandler, start listening
polygon.on('mouseover', function(){...});

// Removing eventhandler, stop listening
polygon.off('mouseover', function(){...});

// Add event handler, listens only once
polygon.once('mouseover', function(){...});

活动参考：http://leafletjs.com/reference.html#events

L.路径参考：http://leafletjs.com/reference.html#path

那说我认为这是Leaflet.Label插件的完美案例。它会在悬停时打开，因此您可以将其用于描述。然后坚持使用L.Popup获取详细信息。

代码：

var polygon = L.polygon([
  [83.34425, -19.51172], 
  [83.2571, -15.86426], 
  [83.07408, -16.04004], 
  [82.78192, -17.31445], 
  [82.62569, -11.42578], 
  [82.36164, -11.29395], 
  [82.11236, -12.48047], 
  [82.37332, -22.71973], 
  [82.64822, -22.93945], 
  [83.34425, -19.51172]
], {
  color: 'yellow',
  fillColor: '#fff',
  fillOpacity: 0.0
});

polygon.bindLabel('Lorem Ipsum');

polygon.bindPopup('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');

polygon.addTo(map);

map.fitBounds(polygon.getBounds());

示例：http://plnkr.co/edit/jzfD9L?p=preview

你如何在leafletjs中创建悬停效果？

1 个答案: