使用jQuery在SVG地图上只选择一个区域

我使用Mapael，一个Raphael扩展为了提供一个交互式地图，到目前为止我已经编码它，因此您可以选择多个区域并根据区域使div元素可见点击，现在我希望能够限制用户一次只选择一个区域。使用jQuery在SVG地图上只选择一个区域

http://plnkr.co/edit/2UAl4Yax99dJAPIDWuTy?p=preview

这里是覆盖点击功能代码的一部分。

eventHandlers: { 
    click: function(e, id, mapElem) { 
     var newData = { 
      'areas': {} 
     }; 
     if (mapElem.originalAttrs.fill == "#f4f4e8" && "id[^='department']") { 
      newData.areas[id] = { 
       attrs: { 
        fill: "#0088db" 
       } 
      }; 
      $('#' + id).css("visibility", "visible") 
     } 
     else if (mapElem.originalAttrs.fill == "#0088db" && "id[^='department']") { 
      newData.areas[id] = { 
       attrs: { 
        fill: "#f4f4e8" 
       } 
      }; 
      $("#" + id).css("visibility", "hidden") 
     } 
     $(".mapcontainer").trigger('update', [newData]); 
    } 
},

同样，这里显示的地图，您可以点击多个领域，但是我想使它所以你可以一次选择一个区域。

我已经尝试了很长一段时间，自己想出了一个解决方案，但是我认为我已经让编码器有点阻挡，并且可以通过一些建议来指向正确的方向。我一直在尝试.bind，.target和更新功能之后的mapael（如果可以帮助，请在下面显示）。

var options = { 
    mapOptions: {},    // was updatedOptions 
    replaceOptions: false  // replace opt.resetPlots/resetAreas: whether mapsOptions should entirely replace current map options, or just extend it, 
    newPlots: {},    // was newPlots 
    newLinks: {},    // was opt.newLinks 
    deletePlotKeys: [],   // was deletedPlots 
    deleteLinkKeys: [],   // was opt.deletedLinks 
    setLegendElemsState: true, // is new 
    animDuration: 0,   // was opt.animDuration 
    afterUpdate: function(){} // was opt.afterUpdate 
}; 
$(".container").trigger('update', [options]);

我不知道如果解决方案可以像通过SVG路径循环时，第一次点击，以确保没有元素已被点击/有蓝色填充，然后再从那里？虽然这听起来有点过于复杂，但我不确定它在实践中如何实施。

来源

2016-04-11 alexc

还记得最后一次点击和重置按第二下它的颜色。 –

我会在做一个else if语句吗？ – alexc

我已经找到了解决这个问题的方法，这里有一个解决方案;

eventHandlers: { 
        click: function (e, id, mapElem, textElem) { 
         var newData = { 
          'areas': {} 
         }; 

         if (previousSelectedElementId !== null) { 
          newData.areas[previousSelectedElementId] = { 
           attrs: { 
            fill: "#5ba4ff" 
           } 
          }; 
         } 

         if (mapElem.originalAttrs.fill == "#5ba4ff") { 
          newData.areas[id] = { 
           attrs: { 
            fill: "#0088db" 
           } 
          }; 
          previousSelectedElementId = id; 
         } else { 
          newData.areas[id] = { 
           attrs: { 
            fill: "#5ba4ff" 
           } 
          }; 
          previousSelectedElementId = null; 
         } 
         $(".mapcontainer").trigger('update', [newData]); 
        }

http://jsfiddle.net/neveldo/wfftgu20/

来源

2016-05-10 09:12:00 alexc

使用jQuery在SVG地图上只选择一个区域

回答

相关问题