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

Select only one area on SVG map using jQuery

本文关键字：区域 一个 jQuery 选择 SVG 地图 使用      更新时间：2024-04-18

我使用Mapael，一个Raphael扩展来提供交互式地图，到目前为止，我已经对它进行了编码，这样你就可以选择多个区域，并根据点击的区域使div元素可见，现在我希望能够限制用户一次只能选择一个区域。

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

这是介绍click函数的部分代码。

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 afterUpdate功能（如果有帮助，请参见下文）。

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路径以确保没有元素被单击/有蓝色填充，然后从那里开始？虽然这听起来有点过于复杂，我不确定它在实践中会如何实现。

我找到了这个问题的解决方案，下面是它的一个plnkr；

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/

相关文章：