美国地图插件，具有状态数据/悬停功能的新按钮

U.S. Map plugin, new buttons with the state data / hover ability

本文关键字：新按钮 功能 按钮 悬停 插件 地图 数据 状态 美国      更新时间：2023-09-26

我正在使用jQuery美国地图插件。

在这里找到。https://github.com/NewSignature/us-map/

我正在尝试添加10个额外的按钮，这些按钮也将与状态数据相关。例如，默认情况下，您可以覆盖某个状态，并且存在HOVER COLOR。我试图在为其创建附加按钮的新状态中保持这种效果。

例如，下面的new按钮。

$("#star_btn1").click(function() {
$('#ca').toggle();

该插件具有已定义和可自定义的悬停样式

'stateHoverStyles': {
    fill: '#ffc600',
},

和：

   _defaultMouseOverAction: function(stateData) {
      // hover effect
      this.bringShapeToFront(stateData.shape);
      this.paper.safari();
      // ... for the state
      var attrs = {};
      if(this.options.stateSpecificHoverStyles[stateData.name]) {
        $.extend(attrs, this.options.stateHoverStyles, this.options.stateSpecificHoverStyles[stateData.name]);
      } else {
        attrs = this.options.stateHoverStyles;
      }
      stateData.shape.animate(attrs, this.options.stateHoverAnimation);

有什么想法可以把它和我的新按钮结合起来吗

您可以让按钮的事件处理程序触发映射插件的事件。

HTML:

<button type="button" class="stateBtn" data-name="CA">California</button>
<button type="button" class="stateBtn" data-name="MN">Minnesota</button>
<br />
<br />
<div id="map" style="width: 550px; height: 350px;"></div>
<div id="clicked-state"></div>

地图的原始JavaScript：

$('#map').usmap({
    click: function (event, data) {
        $('#clicked-state')
            .text('You clicked: ' + data.name)
            .parent().effect('highlight', {
            color: '#C7F464'
        }, 2000);
    }
});

按钮的附加JavaScript：

$('.stateBtn').on('click mouseout mouseover', function(e) {
    var name = $(this).attr('data-name');
    $('#map').usmap('trigger', name, e.type, e);
});

注意如何在不需要添加任何额外JavaScript代码的情况下添加额外的状态按钮。

jsfiddle上的演示

美国地图插件文档

相关文章：