Javascript 如何使突出显示的轮廓通过鼠标悬停和超链接显示在传单.js中？

当用户将鼠标移到传单中的对象上时，我需要在对象周围显示一个轮廓。现在，我可以让对象一直高亮显示，也可以根本不高亮显示。以下是我的代码示例：

var polygon1 = 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',
  opacity: 0.0,
  fillColor: '#fff',
  fillOpacity: 0.0
});
polygon1.bindLabel(popup_csb);
polygon1.bindPopup(content_csb);
polygon1.addTo(map);

我需要在两种情况下为对象创建一个事件

鼠标悬停时，显示突出显示和弹出标签。当鼠标离开对象时，高光将消失

当用户单击页面上的链接（建筑物列表）并勾勒出对象轮廓以向用户显示建筑物在地图上的位置时

第二种情况下，当用户单击其他建筑时，还必须有一个禁用事件

---

非常感谢你的帮助

首先，您需要准备好默认样式和高亮显示样式：

var style = {
    'default': {
        'color': 'yellow'
    },
    'highlight': {
        'color': 'red'
    }
};

创建一些多边形并将其分组，以便轻松访问：

var group = new L.LayerGroup([
    new L.Polygon([
        [-50, -50], [50, -50], [50, -10], [-50, -10]
    ], {
        'label': 'Polygon 1',
        'popup': 'Polygon 1'
    }),
    new L.Polygon([
        [-50, 10], [50, 10], [50, 50], [-50, 50]
    ], {
        'label': 'Polygon 2',
        'popup': 'Polygon 2'
    })
]).addTo(map);

创建一个变量以存储高亮显示的图层，并创建用于设置和取消设置高亮显示的函数：

// Variable for storing highlighted layer
var highlight;

function setHighlight (layer) {
  // Check if something's highlighted, if so unset highlight
  if (highlight) {
    unsetHighlight(highlight);
  }
  // Set highlight style on layer and store to variable
  layer.setStyle(style.highlight);
  highlight = layer;
}

function unsetHighlight (layer) {
  // Set default style and clear variable
  layer.setStyle(style.default);
  highlight = null;
}

迭代图层、设置样式、绑定标签和弹出窗口并添加处理程序：

// Iterate
group.eachLayer(function (layer) {

    // Set default style
    layer.setStyle(style.default);
    // Bind label with polygon option variable
    layer.bindLabel(layer.options.label);
    // Bind popup with polygon option variable
    layer.bindPopup(layer.options.popup);

    // Mouseover handler
    layer.on('mouseover', function (e) {
        // Set highlight
        setHighlight(layer);
    });

    // Mouseout handler
    layer.on('mouseout', function (e) {
         // Unset highlight
        unsetHighlight(layer);
    });

    // Fetch list from DOM
    var list = L.DomUtil.get('list'),
        // Add list item
        item = L.DomUtil.create('li', 'item', list),
        // Add link
        link = L.DomUtil.create('a', 'link', item);

    // Set link text
    link.textContent = layer.options.label;
    // Set link href
    link.href = '#';

    // Add clickhandler to link
    L.DomEvent.addListener(link, 'click', function (e) {
        // Set highlight
        setHighlight(layer);
    });
});

---

示例：

这太棒了。你真的救了我。两次，现在！非常感谢。如果我对这个问题还有任何疑问，我会补充一个后续问题。如何将地图集中在某个位置？例如，此代码：var map=L.map（'map'）.setView（[79，-50]，5）；实例化地图并以该位置为中心。在上述示例的上下文中，如何在运行时将地图指向该位置？每个多边形都需要指定一个坐标位置。谢谢