Ich arbeite mit Mapael, einer Raphael-Erweiterung, um eine interaktive Karte von Frankreich zu erstellen. Ich möchte OnClick Ereignisse auslösen, sobald die SVG-Pfade ausgewählt sind.Zugriff auf SVG-Datenelemente in jQuery
Ich konnte diese Arbeit machen, aber ich denke, dass ich viel Code für etwas schreiben müsste, das entweder dupliziert werden könnte oder in einem Codeblock mit ELSE IF-Anweisungen enthalten wäre.
Bitte beachten Sie den folgenden Code als ein Beispiel dafür;
Hier ist der Code, der die Kartenbereiche zeigt;
(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",
}
}
}
}
);
}));
und hier ist der Code für das defekte Skript versucht onClick Ereignisse zu behandeln;
$(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)"
}
Below I 2 plunks umfassen wird, von denen die erste ist die Arbeitsversion und die zweite ist, wie ich den Code Refactoring hoffen.
ARBEITS VERSION -
http://plnkr.co/edit/XXXNQcND54Iw3HirefMc?p=preview
BROKEN VERSION -
http://plnkr.co/edit/ExDmSj?p=preview
Aus Gründen der Einfachheit ich die Karte unten für dieses Beispiel zwei Bereiche geschnitten haben.
Hoffentlich macht dieser Beitrag Sinn, wenn nicht kann ich weitere Informationen/Details des Problems bei Bedarf bereitstellen. Jede Hilfe wird sehr geschätzt!
Dank