Я работаю с Mapael, расширением Рафаэля, чтобы создать интерактивную карту Франции. Я хотел бы отключить события onClick после выбора путей SVG.Доступ к элементам данных SVG в jQuery
Я смог выполнить эту работу, однако я чувствую, что мне придется написать много кода для чего-то, что можно было бы дублировать или содержать в одном блоке кода с помощью ELSE IF-операторов.
В качестве примера можно привести приведенный ниже код;
Вот код, рисующий области карты;
(function (factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'), require('mapael'));
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'mapael'], factory);
} else {
// Browser globals
factory(jQuery, jQuery.fn.mapael);
}
}
(function ($, Mapael) {
"use strict";
$.extend(true, Mapael,
{
maps : {
france_departments : {
width : 661.85596,
height : 637.08588,
elems : {
"department-75" : "m 533.65,37.59 c -0.56,0.01 -1.14,0.07 -1.69,0.09 l -0.47,0 -0.06,0 c -3.2,-0.16 -6.2,1.71 -8.25,3.88 -1.18,-0.38 -2.14,0.15 -3.09,0.66 -1.64,0.07 -4.2,2.99 -1.75,3.84 2.04,0.46 2.36,3 4.56,3.38 4.15,0.71 8.61,3.62 12.69,1 2.59,-2.23 5.56,1.56 8.38,0.72 1.37,-1.09 1.13,-4.27 -1.16,-3.72 -1.21,-0.03 -2,-1.04 -2.81,-0.38 -1.83,-2.4 -0.68,-4.78 -2.88,-7.06 -0.22,-2.16 -1.78,-2.45 -3.47,-2.41 z M 369.8,144.62 c -0.22,0.01 -0.47,0.02 -0.69,0.03 l -0.19,0 -0.03,0 c -1.27,-0.06 -2.44,0.7 -3.25,1.56 -0.47,-0.15 -0.87,0.05 -1.25,0.25 -0.65,0.03 -1.66,1.16 -0.69,1.5 0.81,0.18 0.94,1.23 1.81,1.38 1.65,0.28 3.41,1.41 5.03,0.38 1.03,-0.89 2.23,0.62 3.34,0.28 0.54,-0.43 0.44,-1.69 -0.47,-1.47 -0.48,-0.01 -0.86,-0.33 -1.19,-0.06 -0.56,-1.04 -0.22,-1.97 -1.09,-2.88 -0.09,-0.86 -0.67,-0.98 -1.34,-0.97 z",
"department-59" : "M 377.51,2.78e-5 C 374.07,1.47 370.51,2.66 366.77,2.44 c -3.1,0.89 -6.29,1.6 -9.18,3.02 1.24,2.59 3.27,6.24 4.33,9.49 0.45,3.3 2.89,5.84 6.41,5.27 1.94,-0.78 4.85,1.64 1.47,1.89 -2.68,1.66 1.93,3.12 0.19,5.04 2.78,-0.45 4.23,3.9 7.14,2.5 1.81,1.18 3.37,-0.01 5.36,1.07 1.63,-1.32 3.21,-0.63 4.48,0.93 0.73,-1.57 2,-1.61 0.95,-3.07 1.61,-2.58 6.95,1.51 2.94,2.57 -2.83,1.01 0.34,3.73 -1.12,5.39 0.9,1.48 4.86,-1.3 3.65,1.61 2.92,-0.02 7.29,0 6.35,4.16 1.35,-0.92 3.57,-0.15 1.94,1.67 -3,0.14 -4.31,3.74 -1.12,5.07 1.69,0.96 2.08,2.48 0.62,3.67 0.34,2.55 4.5,0.15 4.8,3.09 2.64,0.43 -0.05,2.2 -0.9,2.42 1.06,1.6 0.36,2.77 -1.25,3.07 2.12,1.52 -1.64,2.22 0.07,4.15 -2.91,2.78 1.69,6.63 4.47,4.88 2.26,-1.32 5.08,2 6.87,-0.71 2.98,0.44 6.14,1.89 8.42,-1.06 1.98,-0.29 4.46,2.95 5.68,-0.34 2.9,-1.43 5.98,1.3 9.04,1.19 1.53,2.96 3.45,-0.56 5.79,0.04 -1.87,3.96 3.7,3.7 6.26,4.11 2.29,-0.95 -0.64,-4.29 2.61,-4.77 2.82,-0.8 0.92,-4.83 -0.55,-5.74 -3.06,0.67 -0.13,-3.85 -0.08,-5.37 1.87,-1.24 2.82,-4.03 -0.19,-4.26 -1.07,4.16 -2.1,-2.65 -4.39,-2.68 -1.69,-3.72 -4.82,-0.59 -7.62,-0.73 -2.37,-0.85 -5.7,-2.48 -7.81,-0.09 -1.66,4.51 -4.19,-2.36 -2.95,-4.64 0.52,-3.52 -3.24,-7.4 -6.77,-5.76 -1.77,0.07 0.3,-3.59 -2.48,-2.13 -2.41,2.31 -6.1,2.01 -8.29,-0.47 -0.77,-2.54 -0.39,-5.31 -1.88,-7.78 0.28,-2.25 0.31,-4.41 -2.29,-5.22 -0.57,-2.79 -2.95,-5.31 -5.75,-3.44 -2.32,0.87 -5.9,0.75 -6.52,3.6 -1.2,3.14 -4.3,-0.54 -6.47,-0.63 -1.62,-2.75 -3.49,-6.42 -7.19,-5.82 -1.19,-1.96 -1.69,-5.46 -1.07,-7.12 2.22,-2.65 -1.65,-4.24 -2.01,-6.55 C 378.49,2.6 378.6,1.01 377.51,3.38e-5 z M 405.6,54.52 l 0.01,0.01 -0.01,-0.01 z",
}
}
}
}
);
}));
и вот код для сломанного скрипта, который пытается обрабатывать события onClick;
$(function() {
$(".mapcontainer").mapael({
map: {
name: "france_departments"
// Enable zoom on the map
,
zoom: {
enabled: true
}
// Set default plots and areas style,
,
defaultArea: {
attrs: {
fill: "#f4f4e8",
stroke: "#ced8d0",
cursor: "pointer"
},
attrsHover: {
fill: "#68BCFF"
},
eventHandlers: {
click: function(e, id, mapElem) {
var newData = {
'areas': {}
};
if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-59") {
newData.areas[id] = {
attrs: {
fill: "#0088db"
}
};
alert("test")
}
else if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-75") {
newData.areas[id] = {
attrs: {
fill: "#0088db"
}
};
alert("test")
}
else if (mapElem.originalAttrs.fill == "#0088db") {
newData.areas[id] = {
attrs: {
fill: "#f4f4e8"
}
};
}
$(".mapcontainer").trigger('update', [newData]);
}
},
}
},
// Customize some areas of the map
areas: {
"department-59": {
tooltip: {
content: "Nord (59)"
},
},
"department-75": {
value: "2268265",
tooltip: {
content: "Paris (75)"
}
Ниже я есть 2 plunks, первый из которых является рабочая версия, а второй, как я надеюсь, реорганизовать код.
РАБОЧАЯ ВЕРСИЯ -
http://plnkr.co/edit/XXXNQcND54Iw3HirefMc?p=preview
СЛОМЛЕННЫЙ версия -
http://plnkr.co/edit/ExDmSj?p=preview
Для простоты я вырезать карту вниз двумя областями для этого примера.
Надеюсь, это сообщение имеет смысл, если нет, я могу предоставить дополнительную информацию/подробную информацию о проблеме, если это необходимо. Любая помощь будет высоко ценится!
Благодаря