如何使用Raphael v2.2.7制作弹出地图名称?

时间:2017-07-05 08:01:53

标签: javascript html5 svg raphael

我按照

的教程进行操作

https://www.jonathan-petitcolas.com/2013/07/18/create-clickable-svg-france-regions-map.html

地图工作正常,现在我不知道如何在每个地图区域发出警报。例如,如果用户点击区域" corse"然后显示警报" corse"。

任何人都可以帮助我吗?

谢谢!



 var MAP_WIDTH  = 620;
    var MAP_HEIGHT = 600;

    var mapContainer = document.getElementById("map");
    var map = new Raphael(mapContainer, MAP_WIDTH, MAP_HEIGHT);

    var style = {
        fill: "#ddd",
        stroke: "#aaa",
        "stroke-width": 1,
        "stroke-linejoin": "round",
        cursor: "pointer"
    };


    var regions = {};
    regions["alsace"] = map.path("M 480.71875,112.28125 477,113.3125 l -1.71875,3 0,2.9375 -1.5625,1.375 -1.375,0 -2.53125,-1.78125 -1.96875,1.375 -2.34375,0 -1.9375,-1.9375 -3.71875,-0.59375 -2.15625,-0.96875 -0.78125,-2.9375 -1.75,1.9375 -0.96875,4.5 -2.5625,0.78125 0,2.53125 2.5625,1.1875 1.9375,1.375 -0.78125,1.75 1.78125,1.15625 3.125,-2.34375 5.4375,3.125 -2.3125,4.3125 0.1875,1.375 1.5625,1.5625 -1.1875,4.09375 -3.90625,3.90625 -2.15625,-0.1875 1.375,1.34375 -0.78125,3.53125 L 459.25,155 l 3.71875,0.96875 -2.15625,4.875 -2.34375,4.6875 0.59375,2.9375 -1.9375,4.5 -3.34375,2.90625 -0.1875,7.625 -2.4375,2.09375 0.0937,0.0625 0.78125,1.5625 3.125,0.1875 3.53125,2.75 0.5625,1.34375 -0.1875,2.34375 -0.96875,1.78125 0.375,2.34375 2.75,-0.40625 0.59375,2.15625 0.96875,4.15625 2.3125,-0.375 -0.40625,2.125 1.375,1.1875 7.21875,-0.1875 3.71875,-2.9375 0.1875,-4.3125 1.96875,-2.53125 -2.5625,-2.9375 -1.34375,-3.125 1.5625,-2.125 0,-4.90625 0.96875,-2.34375 0,-3.90625 1.75,-2.53125 -1.9375,-2.71875 -0.21875,-6.25 5.09375,-9.96875 -0.59375,-5.65625 2.34375,-7.625 0.59375,-6.65625 5.0625,-3.6875 0,-2.34375 1.96875,-2.5625 1.5625,0 1.75,-1.75 -0.375,-3.3125 1.75,-4.6875 2.71875,-0.59375 L 496.5312,115 l -4.875,-0.5625 -4.3125,-2.15625 -2.9375,1.75 -1.5625,-1.75 -2.125,0 z");
    regions["nord-pas-de-calais"] = map.path("m 285.78125,4.0625 -6.25,2.9375 -9.75,1.5625 -11.34375,2.15625 -8.59375,6.625 0,26.375 -0.0625,0.78125 3.03125,0.71875 0.96875,2.15625 2.34375,-0.59375 1.375,-1.75 1.75,0.59375 3.71875,2.90625 1.375,-0.5625 0.96875,2.34375 3.5,1.5625 0,1.9375 2.5625,0.96875 2.53125,-0.96875 4.875,-0.59375 1.1875,1 2.34375,-1 1.15625,1.96875 -2.90625,1.9375 0,2.75 0.96875,0.96875 0.78125,-0.1875 0.5625,-1.5625 1.78125,-1.1875 1.75,1.375 4.09375,1.375 1.75,0 0,-1.96875 2.5625,1.78125 0.1875,1.5625 -1.1875,1.75 2.15625,-1.1875 1.78125,-0.78125 0.75,1.375 0,1.375 2.9375,-1.5625 4.6875,0 1.75,1.75 1.5625,0.40625 1.5625,-1 2.15625,0 0.59375,1.1875 0.78125,-0.1875 2.34375,-1.375 2.34375,1.375 3.125,-2.15625 1.375,0 1.5625,1.375 3.125,-2.15625 1.34375,0.1875 1.1875,0.96875 4.3125,0.40625 0.375,1.75 2.15625,-1.9375 1.15625,0 0.78125,2.53125 3.71875,0.96875 1.0625,-0.71875 -0.3125,0 -0.1875,-1.9375 3.90625,-2.34375 -0.59375,-3.71875 -3.71875,-0.96875 0.96875,-1 0,-2.71875 2.9375,-2.15625 -0.78125,-1.5625 -6.25,-4.875 -10.9375,0.59375 -1.15625,1.9375 -1.375,0 0.1875,-6.84375 -3.125,-3.6875 -2.34375,0.375 -1.375,-1.5625 -3.90625,1.75 -1.34375,-1.34375 -2.75,-0.40625 -0.78125,-2.53125 -0.1875,-7.8125 -1.75,-0.78125 -0.21875,-1.1875 -1.15625,0 -0.40625,-2.34375 -2.53125,0.21875 -4.875,1.5625 -2.34375,2.90625 -2.34375,0 -1.5625,-1.9375 -0.59375,-2.15625 -1.9375,-2.15625 -2.75,0 -1.15625,-2.125 0,-3.34375 1.34375,-2.125 -0.78125,-2.9375 -2.53125,-5.09375 z");
    regions["corse"] = map.path("m 568.92104,452.72493 -2.92969,1.95313 0.39062,1.95312 1.5625,1.95313 -1.75781,1.36719 0.78125,1.5625 -1.17187,1.36718 0,1.75782 1.95312,1.75781 0,2.73437 -1.17187,2.53907 -1.36719,0.58593 -1.5625,-2.14843 -2.73438,0.19531 -0.58593,-0.39063 -2.34375,0 -2.14844,1.95313 -0.78125,3.32031 -5.07813,0.97656 -3.90625,3.32032 -0.78125,2.14843 -1.95312,-0.19531 -0.97656,-1.17187 -0.58594,3.32031 -1.36719,0.58594 -0.39062,3.125 0.58593,1.36718 -2.14843,1.5625 -0.58594,1.5625 -1.5625,0 0,2.14844 1.95312,1.36719 3.32032,1.95312 0.19531,1.56251 -1.95313,0.58593 -3.125,0.58594 0,1.36719 1.17188,1.17187 0.19531,3.90625 4.29688,1.36719 1.5625,0.39063 1.36718,2.14843 -0.97656,1.36719 -1.5625,0.58594 -1.17187,2.14844 -1.17188,1.36718 0.58594,3.51563 2.92969,-0.19531 0.78125,0.58593 2.73437,-1.36718 0.78125,0.78125 -1.36719,2.92968 1.36719,1.36719 -2.34375,1.75781 -1.5625,3.51563 4.29688,0.97656 6.05468,0.58594 -2.53906,2.92969 c 0,0 -1.95312,-0.78125 -1.95312,0.19531 0,0.97656 -1.36719,3.32031 -1.36719,3.32031 l 1.95312,2.14844 3.51563,2.14844 6.64062,1.75781 1.95313,0.78125 1.75781,0.78125 -1.17187,2.14844 3.125,-0.19532 0.58593,1.36719 3.125,0 0.78125,-3.71094 -1.95312,-0.39062 2.73437,-2.92969 -0.97656,-0.97656 0.19531,-1.75781 3.51563,-1.95313 0.19531,-2.14844 -2.34375,-0.19531 -1.5625,1.36719 0,-1.95313 3.125,-0.19531 0.97656,-2.34375 0.78125,-6.83594 -0.58593,-2.92968 -0.19532,-8.59375 4.6875,-6.64063 0,-10.9375 -1.95312,-3.71094 -0.58594,-11.71875 -1.36719,-2.14844 -2.53906,-1.95312 -0.39062,-7.22656 1.17187,-3.32032 -1.5625,-5.27343 -0.97656,-4.29688 -0.78125,-1.17187 -1.75781,-0.97657 z");
    regions["rhone-alpes"] = map.path("m 383.28125,262.59375 -2.15625,0.21875 -1.375,2.53125 -3.6875,14.4375 -1.1875,2.75 -1.375,-0.1875 -0.75,-3.90625 -1,-3.125 -2.125,0.1875 -1.78125,1.75 -1.15625,-1.5625 -1.75,1.5625 -2.375,-1.5625 -1.9375,0 -0.78125,0.59375 -1.15625,6.25 -2.15625,0 -1.5625,1.5625 -1.1875,-1.1875 -6.25,-0.96875 -2.34375,1.375 -1.5625,0 -0.375,-1.375 -2.9375,-0.59375 -0.1875,-3.125 -0.59375,-0.1875 L 336,278.625 l -0.5625,2.15625 1.375,2.71875 0.375,11.125 -4.6875,0.21875 -0.1875,1.75 3.125,2.53125 -1.75,1.75 -0.59375,4.3125 2.34375,3.125 2.125,5.0625 5.09375,3.34375 1.75,6.4375 -3.71875,3.5 0.59375,2.34375 5.46875,1.78125 4.3125,-3.53125 2.125,-0.1875 6.25,2.71875 -0.375,3.71875 3.125,-0.1875 2.53125,2.9375 -1.15625,4.6875 -2.75,1.15625 -1.15625,1.96875 0.78125,2.53125 0.5625,1.375 -2.90625,0 -0.21875,3.6875 -3.125,0.21875 -1.5625,4.875 -4.6875,0 -5.0625,3.71875 -2.8125,4.46875 0.46875,0.59375 1.375,7.1875 3.3125,3.59375 -0.5625,4.125 4.15625,2.5 0,5.53125 2.21875,-1.125 4.6875,3.0625 2.21875,0.8125 0.53125,-3.875 2.78125,-0.53125 0.8125,3.03125 2.78125,-0.28125 0.53125,-3.03125 6.34375,3.5625 1.03125,-2.09375 5.28125,-0.78125 1.15625,1.375 -0.5625,3.90625 0.78125,0.96875 2.90625,-2.9375 2.5625,-0.1875 0.5625,-1.5625 -3.3125,-0.40625 -0.5625,-3.5 2.125,-3.3125 2.75,-0.21875 2.71875,2.5625 -2.71875,3.6875 0.78125,1.375 3.90625,0.40625 2.53125,-2.15625 -1.375,2.9375 0.40625,2.34375 4.09375,0.375 5.46875,0.40625 0.78125,2.53125 2.9375,2.15625 2.53125,0.1875 1.75,-1.5625 1,-2.9375 1.5625,1.375 1.15625,1.375 0.78125,-7.25 -1.9375,-0.375 -1.1875,-2.53125 -6.625,-1.78125 -0.8125,-3.3125 2.375,-1.5625 -1.96875,-1.375 0.40625,-1.75 3.125,0.1875 2.71875,1.375 2.15625,-2.53125 -2.15625,-1.75 0.1875,-2.34375 1.1875,-3.71875 4.09375,-0.40625 3.3125,-1.34375 0.59375,-1.375 -1.5625,-0.78125 0,-2.34375 4.875,0 1.5625,-1.5625 -0.96875,-1.75 2.53125,-1.96875 1.78125,0.78125 2.53125,-2.15625 4.46875,0.78125 1.5625,-1.75 3.71875,0.1875 0,-4.28125 -1.5625,-0.78125 -0.78125,-2.53125 L 434.84375,346 434.25,345.03125 l 0.78125,-4.09375 1.375,-1.1875 3.53125,-0.375 1.15625,1.15625 0.59375,2.75 3.5,-0.40625 0.40625,-2.9375 1.75,-0.78125 3.75,0.1875 -0.0625,-0.125 5.84375,-2.34375 2.15625,1.375 2.15625,0 0.1875,-2.34375 2.53125,-1.375 0.96875,-1.15625 5.09375,-1.96875 0.59375,-3.3125 -1,-1.5625 2.75,-4.6875 L 469.78125,320.875 469,318.125 463.71875,315 c 0,0 0.31502,-5.98725 -0.1875,-7.0625 -0.0158,-0.0269 -0.0497,-0.0773 -0.0625,-0.0937 -0.005,-0.005 -0.0261,-0.0266 -0.0313,-0.0313 -0.004,2.2e-4 -0.0284,-7e-5 -0.0313,0 -5e-5,-0.007 -1.7e-4,-0.0294 0,-0.0313 -0.004,1.2e-4 -0.0284,-4e-5 -0.0313,0 -0.003,-1.5e-4 -0.0283,-7e-5 -0.0313,0 -0.004,-8e-5 -0.0284,10e-6 -0.0313,0 -0.78125,0.19532 -3.6875,0.40625 -3.6875,0.40625 l -2.9375,-3.34375 0.1875,-6.625 6.65625,-2.75 0.78125,-1.9375 -0.40625,-4.3125 -4.28125,-4.46875 -1.375,0.78125 0,-1.78125 0,-2.90625 -3.71875,-1.78125 -0.1875,-1.5625 2.15625,-2.34375 0,-2.71875 -3.53125,-3.71875 -0.1875,-2.53125 -6.65625,0 -4.46875,0.78125 -4.3125,3.5 -1.15625,-1.75 -2.15625,0.1875 -1.96875,4.3125 0.21875,1.75 2.125,1.75 -3.90625,2.5625 -2.53125,2.34375 -6.4375,0 0,-3.71875 2.34375,-1.375 3.5,-0.375 0.21875,-1.96875 -1.1875,-0.78125 2.9375,-3.71875 -0.40625,-1.15625 -3.34375,-1.78125 -8.125,8.9375 -5.65625,0 0,-2.34375 -3.125,-1.5625 -3.71875,4.09375 -2.9375,0.40625 0,-2.75 -2.53125,-1.15625 -3.90625,-5.46875 -3.53125,-1.375 -1.15625,-2.53125 -1.96875,-0.40625 -1.9375,1.375 -1.5625,0.40625 -2.15625,-1.78125 z");
    regions["centre"] = map.path("m 247.15625,126.09375 -1.1875,0.96875 0,3.125 -3.90625,1.9375 0,2.9375 -1.15625,1.375 -4.90625,0 -2.3125,-0.96875 -7.0625,3.6875 -2.71875,0 -2.8125,2.6875 0.65625,0.4375 0.1875,3.34375 4.125,3.5 0.375,7.21875 -1.9375,2.34375 -2.9375,0.59375 -2.9375,1.75 0.40625,1.5625 1.34375,1.78125 0,4.625 0.40625,0.0625 L 223.5,171 l -2.3125,2.9375 -1.5625,2.71875 1.9375,1.78125 -0.1875,4.09375 -0.78125,2.71875 -1.96875,0 0,3.71875 -2.71875,3.53125 -2.9375,1.15625 -1.375,1.75 0.96875,2.34375 -5.65625,1.5625 -1.34375,1.96875 -2.375,-1.5625 1.1875,3.90625 -2.15625,0 -3.90625,-2.75 -1.9375,3.90625 0.96875,1.1875 0,1.15625 -1.96875,2.5625 0.21875,4.28125 -3.125,3.71875 -2.21875,8 0.25,0 0.78125,3.125 3.71875,0.78125 0,2.34375 4.6875,1.375 0,3.71875 -0.1875,2.34375 5.84375,0 5.09375,-1.1875 -0.40625,-2.15625 1.5625,-0.96875 1.5625,2.15625 1.375,0.59375 1.15625,4.6875 3.34375,3.5 0.375,2.75 3.53125,3.5 0,3.71875 -0.78125,2.34375 3.71875,2.9375 1.9375,1.9375 3.125,0.40625 1.1875,4.09375 2.125,1.15625 -0.375,2.9375 -1.5625,0.28125 0.5625,0.125 4.90625,0.375 1.75,-1.75 3.125,3.125 3.90625,-4.5 1.75,1.1875 2.34375,-0.21875 0.78125,0.40625 3.53125,0.1875 1.15625,-3.125 9.78125,1.1875 3.71875,0.96875 6.28125,-0.75 0.9375,-2 2.53125,-2.90625 4.875,-1 2.5625,0.78125 2.71875,-2.125 -0.1875,-1.5625 -0.96875,-0.78125 0,-3.125 5.25,-5.28125 1.96875,2.15625 1.75,-1.78125 1.5625,-0.1875 2.71875,-3.5 4.5,0.375 0.0625,1.0625 1.5,-4.78125 -0.96875,-1.75 0.1875,-2.53125 0.59375,-5.09375 -2.15625,-2.125 0.40625,-4.6875 -1.96875,-4.125 -0.1875,-2.71875 -3.53125,-2.75 L 299.5,216.5 l 1.75,-2.53125 0,-3.71875 -2.34375,-2.71875 -0.1875,-1.96875 3.90625,-1.15625 -0.59375,-2.15625 -0.59375,-3.125 -2.53125,-3.5 -0.59375,-2.15625 3.90625,0 2.75,-1.96875 0.375,-2.90625 -1.75,-1.96875 5.09375,-4.28125 0,-3.53125 -2.5625,-2.71875 -0.96875,-3.125 -3.53125,-3.34375 -4.875,2.75 -0.375,-1.5625 -2.15625,-0.1875 -0.59375,1.5625 -1.9375,0.375 -5.28125,-0.1875 -2.15625,1.375 -1.75,-1.5625 3.125,-2.15625 -0.1875,-3.3125 -2.34375,-1.1875 -1.96875,-2.9375 -5.25,-0.375 -2.15625,-1.75 -2.53125,2.34375 -6.25,0.5625 -0.40625,-5.25 L 264.125,157.53125 263.75,155 l -4.09375,-0.78125 -1.78125,-2.15625 -0.5625,-4.3125 -2.34375,-0.375 -0.40625,-2.15625 -2.71875,-1.9375 -1.375,-3.34375 1.375,-2.34375 -1.375,-1.5625 0,-1.9375 0.78125,-2.15625 -1.5625,-1.5625 -0.59375,-2.34375 -1.9375,-1.9375 z");
    regions["bourgogne"] = map.path("m 318.4375,157.34375 -1.75,1.34375 -7.625,-0.375 -3.5,1.75 -1.375,2.9375 1.5625,1.75 -2.34375,2.75 -1.78125,2.125 3.53125,3.34375 0.96875,3.125 2.5625,2.71875 0,3.53125 -5.09375,4.28125 1.75,1.96875 -0.375,2.90625 -2.75,1.96875 -3.90625,0 0.59375,2.15625 2.53125,3.5 0.59375,3.125 0.59375,2.15625 -3.90625,1.15625 0.1875,1.96875 2.34375,2.71875 0,3.71875 -1.75,2.53125 0.5625,2.34375 3.53125,2.75 0.1875,2.71875 1.96875,4.125 -0.40625,4.6875 2.15625,2.125 -0.59375,5.09375 -0.1875,2.53125 0.96875,1.75 -1.5,4.78125 0.125,1.46875 3.34375,1.5625 L 312,255 l 2.125,-1.1875 1.96875,-1.15625 0.40625,1.75 2.90625,0 0.78125,-1.5625 1.75,0.78125 0.59375,2.53125 1.5625,-0.375 3.71875,-5.09375 1.9375,1.375 3.9375,7.40625 0,2.9375 0.96875,1.1875 3.3125,0 1.15625,1.5625 3.125,0 1.375,1.9375 -0.1875,7.625 -4.09375,3.125 -0.0937,0.21875 0.28125,-0.0313 0.59375,0.1875 0.1875,3.125 2.9375,0.59375 0.375,1.375 1.5625,0 2.34375,-1.375 6.25,0.96875 1.1875,1.1875 1.5625,-1.5625 2.15625,0 1.15625,-6.25 0.78125,-0.59375 1.9375,0 2.375,1.5625 1.75,-1.5625 1.15625,1.5625 1.78125,-1.75 2.125,-0.1875 1,3.125 0.75,3.90625 1.375,0.1875 1.1875,-2.75 3.6875,-14.4375 1.375,-2.53125 2.15625,-0.21875 2.15625,1.78125 1.5625,-0.40625 1.9375,-1.375 1.96875,0.40625 1.15625,2.53125 1.125,0.4375 5.125,-0.625 1.96875,-1.5625 -0.78125,-1.1875 -2.34375,-0.78125 -0.21875,-2.71875 1.96875,-1.375 0.78125,-3.3125 -1.75,-3.125 -1.1875,-1.5625 0.59375,-0.59375 0,-1.9375 -1.5625,-1 -0.40625,-1.5625 4.5,-0.5625 0.40625,-1.5625 -1.375,0 -1.15625,-1.375 -2.15625,0 -1.78125,-2.9375 L 392.25,238 l 0.21875,-2.53125 1.34375,-0.78125 -0.1875,-1 -0.375,-1.15625 0.96875,-1.5625 3.3125,-1.5625 0,-1.5625 1.1875,-1.5625 1.15625,-1.5625 -0.375,-1.375 0.5625,-2.15625 0.40625,-3.125 0.78125,0 -0.1875,-1.15625 -0.78125,-0.78125 -0.21875,-3.90625 -1.75,-0.1875 -0.375,-3.125 -2.15625,-1 0.78125,-0.96875 1.1875,-0.375 2.53125,-2.9375 -0.21875,-1.5625 -1.5625,-3.125 -2.3125,-0.40625 -0.8125,1.96875 -4.28125,0.96875 -0.40625,-0.96875 -3.125,-3.90625 -1.75,0.96875 -2.34375,-0.1875 -0.78125,-1.5625 -3.125,0.1875 -0.1875,-3.3125 -1.75,-1.1875 2.53125,-2.71875 -4.5,-6.0625 -3.5,-3.71875 -3.125,-1.75 -5.65625,0 -0.40625,2.53125 -2.53125,1.375 -6.4375,0.1875 -1,2.15625 -1.375,-0.1875 -1.15625,-2.15625 -3.90625,1.96875 -7.8125,-0.40625 -0.96875,-2.15625 -2.15625,-2.90625 -0.375,-3.53125 -3.125,-3.71875 -1.96875,1.375 -3.53125,-2.71875 0.59375,-5.28125 -5.0625,-5.28125 -2.34375,0 -1.375,-1.15625 z");
    regions["poitou-charentes"] = map.path("m 188.75,225.6875 -3.71875,3.90625 -1.34375,2.34375 -1.375,-1.15625 -0.59375,-1.375 -5.28125,0.1875 -4.875,0.96875 -5.28125,0.40625 0,2.71875 -2.71875,1.78125 -6.0625,-1.375 -4.09375,1.75 1.9375,2.75 0,2.34375 4.6875,3.90625 -1.15625,2.53125 3.125,3.5 -1.375,1.78125 1.9375,2.90625 0.59375,5.46875 -1.15625,1.5625 1.375,2.34375 -1.375,2.5625 0.1875,1.5625 1.5625,-1.1875 1.9375,1.96875 -2.71875,1.75 L 162,272.75 l -2.15625,0.59375 -2.53125,1.1875 -3.125,-2.34375 -3.71875,1.5625 -1.15625,-3.125 -2.75,0.1875 -5.96875,3.625 1.4375,1.3125 -3.125,2.53125 -0.375,1.96875 -2.9375,0.375 -1.5625,-1.75 -3.90625,-0.375 -0.40625,-1.96875 -2.34375,-1.5625 -3.3125,1.1875 2.15625,3.125 2.71875,0 2.75,1.75 2.15625,1.75 4.09375,-0.1875 0.78125,1.75 2.71875,0.59375 1,2.71875 1.75,0.78125 -0.1875,2.15625 -2.34375,-0.375 -0.78125,1.15625 1.75,2.53125 -0.96875,4.3125 -2.34375,-0.1875 0.1875,2.71875 0.59375,0.96875 -2.75,0 -0.375,-1.5625 1.75,-2.34375 -0.59375,-1.34375 -0.96875,-0.78125 L 136.75,291 l -3.3125,-0.40625 -2.71875,-3.3125 -0.40625,6.84375 4.5,3.3125 0.375,3.71875 0.78125,4.28125 0.40625,4.3125 2.34375,-0.21875 4.09375,3.34375 2.75,1.5625 0.1875,1.9375 2.15625,0.40625 6.25,6.25 1.46875,6.75 5.78125,0 0.96875,-0.96875 0.1875,2.9375 5.09375,0.59375 0.78125,6.25 2.75,0.1875 4.46875,4.5 2.34375,0.375 2.75,-1.375 1.9375,1.375 1.5625,-3.3125 2.15625,-3.71875 3.90625,0.40625 1.9375,-1.78125 3.53125,-3.5 0.1875,-6.84375 9.1875,-6.25 0.1875,-4.6875 2.75,-0.375 1.75,-3.125 1.09375,0.0313 0.65625,-2.96875 1.5625,-0.1875 0.96875,-2.75 1.96875,-0.59375 2.34375,-1.5625 -0.375,-4.875 1.75,-0.59375 3.5,-0.78125 -0.1875,-1.75 -0.59375,-2.71875 -2.71875,-0.21875 -1.5625,-1.75 0.96875,-1.75 0.1875,-5.28125 -1.34375,-1.5625 1.5625,-1.15625 2.53125,-2.9375 4.28125,-0.1875 0,-2.34375 2.15625,-1.78125 5.28125,-0.96875 0.375,-2.9375 -2.125,-1.15625 -1.1875,-4.09375 -3.125,-0.40625 -1.9375,-1.9375 -3.71875,-2.9375 0.78125,-2.34375 0,-3.71875 -3.53125,-3.5 -0.375,-2.75 -3.34375,-3.5 -1.15625,-4.6875 -1.375,-0.59375 -1.5625,-2.15625 -1.5625,0.96875 0.40625,2.15625 -5.09375,1.1875 -5.84375,0 0.1875,-2.34375 0,-3.71875 -4.6875,-1.375 0,-2.34375 -3.71875,-0.78125 -0.78125,-3.125 -1.75,0 z");
    regions["limousin"] = map.path("m 256.125,267.875 -1.15625,3.125 -3.53125,-0.1875 -0.78125,-0.40625 -2.34375,0.21875 -1.75,-1.1875 -3.90625,4.5 -3.125,-3.125 -1.75,1.75 -4.90625,-0.375 -0.5625,-0.125 -3.71875,0.6875 -2.15625,1.78125 0,2.34375 -4.28125,0.1875 -2.53125,2.9375 -1.5625,1.15625 1.34375,1.5625 -0.1875,5.28125 -0.96875,1.75 1.5625,1.75 2.71875,0.21875 0.59375,2.71875 0.1875,1.75 -3.5,0.78125 -1.75,0.59375 0.375,4.875 -2.34375,1.5625 -1.96875,0.59375 -0.96875,2.75 -1.5625,0.1875 -0.65625,2.96875 4.5625,0.15625 1,1.9375 -0.8125,2.15625 1.78125,2.34375 1.34375,-0.375 1.375,-1.96875 6.25,0.59375 1,3.90625 4.28125,0.59375 0.96875,1.34375 -2.9375,1.375 1.375,0.96875 4.125,0.59375 1.15625,2.9375 2.15625,1.75 -3.90625,3.53125 0,2.71875 1.5625,0.78125 -1.5625,1.96875 2.15625,1.75 -1.5625,1.9375 1.75,1.1875 4.28125,-0.1875 -0.1875,4.28125 1.625,2.5625 0.59375,-0.0937 4.15625,-1.9375 4.96875,2.21875 3.84375,5.5 2.21875,-0.28125 3.3125,-3.3125 1.09375,1.9375 2.21875,-2.1875 3.03125,0.8125 0.0937,0.65625 2.53125,-1.78125 -0.78125,-1.9375 -1.1875,-1.1875 1.5625,-1.9375 1.5625,0 1,-3.125 0.78125,-1.5625 -0.59375,-3.53125 2.53125,-3.5 3.53125,-2.15625 0.1875,-5.46875 1.75,0.96875 1.96875,2.15625 1.9375,0 1.1875,-1.375 -0.96875,-2.34375 0.96875,-3.5 -0.59375,-3.3125 -1.1875,-1.375 0,-2.75 1.78125,-2.90625 -0.40625,-2.75 -4.5,-4.5 -0.375,-1.75 3.71875,-2.15625 2.15625,-1.15625 0.5625,-2.75 2.34375,-1.75 L 288.9375,291.5 287.375,289.5625 287,283.5 l -2.15625,-5.0625 -2.15625,-0.78125 -1.5625,-2.75 -1.375,1.75 -1.34375,-1.75 0,-2.34375 -2.34375,-3.3125 -6.4375,0.78125 -3.71875,-0.96875 -9.78125,-1.1875 z");
    regions["aquitaine"] = map.path("m 209.84375,310.46875 -1.75,3.125 -2.75,0.375 -0.1875,4.6875 -9.1875,6.25 -0.1875,6.84375 -3.53125,3.5 -1.9375,1.78125 -3.90625,-0.40625 -2.15625,3.71875 -1.5625,3.3125 -1.9375,-1.375 -2.75,1.375 -2.34375,-0.375 -4.46875,-4.5 -2.75,-0.1875 -0.78125,-6.25 -5.09375,-0.59375 -0.1875,-2.9375 -0.96875,0.96875 -5.78125,0 0.28125,1.25 1.375,5.65625 0.375,5.65625 -0.96875,1.5625 -0.96875,-4.6875 -2.75,-10.71875 -9.96875,-9 0.21875,-4.09375 -1.96875,-0.1875 -3.125,4.6875 -0.96875,16.40625 -2.53125,16.59375 -1.78125,12.875 -0.1875,3.34375 1.375,-4.5 2.71875,-3.53125 3.90625,3.53125 0.40625,1.15625 1.15625,1.5625 -4.875,0.21875 -0.78125,-1.1875 -1.9375,0.78125 -0.40625,2.9375 -2.15625,2.9375 0,4.46875 -3.5,18.75 -4.5,17.1875 -1.375,6.65625 -1.15625,4.6875 -3.71875,6.4375 -4.5,5.46875 -3.5,1.375 -2.53125,0.375 0,2.15625 2.34375,2.15625 3.5,0.1875 0.1875,2.53125 2.75,0.21875 0.78125,-1.78125 3.71875,1.5625 2.34375,0.59375 0.5625,2.34375 -1.34375,1.1875 0,3.6875 -2.75,1.375 -0.1875,1.75 1.75,1.96875 3.125,0.96875 0.59375,-2.9375 1.75,-1.9375 -0.1875,2.53125 1.375,1.96875 3.5,0 1.5625,2.125 4.6875,0.78125 4.5,2.75 7.40625,0 0.40625,4.09375 5.0625,3.90625 1.96875,2.34375 2.15625,-1.15625 1.9375,-0.40625 0.96875,0.96875 1.78125,-0.96875 3.40625,-1.875 0.3125,-4.03125 1.5625,-1.1875 0.8125,-6.4375 2.90625,0.59375 1.1875,-0.78125 -1.375,-2.75 5.28125,-4.5 3.125,-7.03125 1.9375,-2.53125 -2.34375,-3.5 -1.5625,-2.34375 2.15625,-1.96875 -3.3125,-5.46875 -5.28125,-0.375 -1.5625,-2.75 1.375,-3.71875 1.9375,-2.53125 -0.59375,-3.3125 1.5625,-1.5625 -2.3125,-3.90625 1.9375,-2.34375 2.15625,-0.40625 1.9375,0.78125 2.75,-2.34375 0.96875,2.9375 0.96875,1.375 2.15625,-0.59375 -0.1875,-2.53125 1.375,-2.9375 2.3125,1.96875 3.125,-3.125 1.375,1.9375 3.3125,-0.59375 3.53125,-0.375 1.5625,-2.75 5.84375,-0.5625 2.9375,2.90625 1,-0.96875 1.9375,-0.59375 -0.78125,-2.71875 2.9375,-0.78125 3.71875,-0.78125 -0.8125,-2.34375 1.1875,-1.375 0.96875,-3.71875 -2.15625,-2.34375 1.375,-4.46875 2.9375,1.75 4.3125,-0.78125 -1.96875,-4.3125 -1.5625,-5.84375 3.90625,-0.1875 0.96875,-2.5625 1.78125,-1.75 0.1875,-2.9375 4.28125,-0.375 2.75,-3.90625 -1.1875,-0.40625 -0.1875,-2.125 3.3125,-0.40625 0.21875,-1.9375 1.5625,-1 1.75,-3.125 -1.75,-1.9375 0,-2.15625 1.34375,-1.15625 -1.75,-2.75 0.1875,-4.28125 -4.28125,0.1875 -1.75,-1.1875 1.5625,-1.9375 -2.15625,-1.75 1.5625,-1.96875 -1.5625,-0.78125 0,-2.71875 3.90625,-3.53125 -2.15625,-1.75 -1.15625,-2.9375 -4.125,-0.59375 -1.375,-0.96875 2.9375,-1.375 -0.96875,-1.34375 -4.28125,-0.59375 -1,-3.90625 -6.25,-0.59375 -1.375,1.96875 -1.34375,0.375 -1.78125,-2.34375 0.8125,-2.15625 -1,-1.9375 -5.65625,-0.1875 z");
    regions["midi-pyrenees"] = map.path("m 247.46875,347.3125 -4.15625,1.9375 -0.59375,0.0937 0.125,0.1875 -1.34375,1.15625 0,2.15625 1.75,1.9375 -1.75,3.125 -1.5625,1 -0.21875,1.9375 -3.3125,0.40625 0.1875,2.125 1.1875,0.40625 -2.75,3.90625 -4.28125,0.375 -0.1875,2.9375 -1.78125,1.75 -0.96875,2.5625 -3.90625,0.1875 1.5625,5.84375 1.96875,4.3125 -4.3125,0.78125 -2.9375,-1.75 -1.375,4.46875 2.15625,2.34375 -0.96875,3.71875 -1.1875,1.375 0.8125,2.34375 -3.71875,0.78125 -2.9375,0.78125 0.78125,2.71875 -1.9375,0.59375 -1,0.96875 -2.9375,-2.90625 -5.84375,0.5625 -1.5625,2.75 -3.53125,0.375 -3.3125,0.59375 -1.375,-1.9375 -3.125,3.125 -2.3125,-1.96875 -1.375,2.9375 0.1875,2.53125 -2.15625,0.59375 -0.96875,-1.375 -0.96875,-2.9375 -2.75,2.34375 -1.9375,-0.78125 -2.15625,0.40625 -1.9375,2.34375 2.3125,3.90625 -1.5625,1.5625 0.59375,3.3125 -1.9375,2.53125 -1.375,3.71875 1.5625,2.75 5.28125,0.375 3.3125,5.46875 -2.15625,1.96875 1.5625,2.34375 2.34375,3.5 -1.9375,2.53125 -3.125,7.03125 -5.28125,4.5 1.375,2.75 -1.1875,0.78125 -2.90625,-0.59375 -0.8125,6.4375 -1.5625,1.1875 -0.3125,4.03125 0.5,-0.28125 3.3125,1.96875 3.90625,2.9375 0.375,2.34375 3.125,2.53125 2.5625,0 6.4375,-2.75 2.71875,3.125 3.71875,1 1.375,-2.34375 1.75,0.78125 11.71875,0.78125 0.40625,-9.59375 2.71875,0.40625 5.09375,2.9375 6.03125,1.15625 2.5625,0 3.3125,4.3125 8.40625,-0.40625 3.3125,5.28125 2.9375,-1.1875 8.59375,1.1875 0.625,3.59375 6.0625,-1.40625 2.21875,-1.9375 3.3125,-0.84375 0.8125,-1.65625 7.1875,-0.53125 -4.40625,-5.25 -3.59375,1.9375 -6.34375,-5.25 1.375,-1.9375 4.96875,0 -0.5625,-4.6875 0,-3.59375 -0.8125,-6.65625 -9.6875,-4.6875 0.5625,-1.65625 -2.21875,-2.46875 2.5,-1.125 0.53125,-3.03125 3.0625,-1.375 -0.84375,-1.9375 2.78125,-2.5 1.375,2.5 4.125,-1.375 1.9375,-0.28125 -0.28125,1.375 3.875,0 3.59375,1.125 0.28125,-3.59375 1.65625,0 6.0625,1.09375 5.8125,0 4.40625,-1.375 1.125,-3.59375 -3.03125,-2.78125 0.8125,-2.75 1.65625,-2.46875 2.75,1.90625 7.1875,-2.46875 1.125,-2.21875 1.65625,0 3.3125,0 -0.28125,-5.78125 0,-1.9375 1.65625,0 3.03125,1.65625 3.03125,0 -0.53125,-3.3125 1.65625,-1.40625 3.3125,-0.53125 0,-2.78125 3.59375,-1.65625 -0.84375,-3.84375 -3.03125,0 -2.75,-0.5625 -0.5625,-2.21875 2.21875,-0.53125 0,-2.78125 2.1875,-1.9375 -1.65625,-0.8125 -4.6875,0.8125 0.28125,-2.1875 -3.3125,-1.40625 -0.84375,-6.625 0,-4.6875 -2.75,-1.9375 0.28125,-3.875 -5.8125,-7.15625 -0.5625,-5.53125 -1.90625,0 -0.84375,-5.53125 -3.875,0.5625 -0.53125,-3.59375 -0.5625,-0.84375 -5.53125,4.71875 0,4.6875 -1.375,0 -0.5625,4.40625 -1.375,0.5625 -1.09375,2.46875 -6.09375,0 -0.53125,-0.8125 -2.78125,0 -1.65625,2.75 -2.1875,-0.28125 1.09375,-3.3125 -2.5,-1.09375 2.5,-5.8125 -3.3125,-2.46875 -1.125,-7.1875 -3.03125,-0.8125 -2.21875,2.1875 -1.09375,-1.9375 -3.3125,3.3125 -2.21875,0.28125 -3.84375,-5.5 -4.96875,-2.21875 z");
    regions["languedoc-roussillon"] = map.path("m 320.78125,352.25 -5.46875,1.96875 -1.5625,3.5 -3.5,-2.34375 -2.75,8.59375 -2.8125,6.46875 4.09375,5.03125 -0.28125,3.875 2.75,1.9375 0,4.6875 0.84375,6.625 3.3125,1.40625 -0.28125,2.1875 4.6875,-0.8125 1.65625,0.8125 -2.1875,1.9375 0,2.78125 -2.21875,0.53125 0.5625,2.21875 2.75,0.5625 3.03125,0 0.84375,3.84375 -3.59375,1.65625 0,2.78125 -3.3125,0.53125 -1.65625,1.40625 0.53125,3.3125 -3.03125,0 -3.03125,-1.65625 -1.65625,0 0,1.9375 0.28125,5.78125 -3.3125,0 -1.65625,0 -1.125,2.21875 -7.1875,2.46875 -2.75,-1.90625 -1.65625,2.46875 -0.8125,2.75 3.03125,2.78125 -1.125,3.59375 -4.40625,1.375 -5.8125,0 -6.0625,-1.09375 -1.65625,0 -0.28125,3.59375 -3.59375,-1.125 -3.875,0 0.28125,-1.375 -1.9375,0.28125 -4.125,1.375 -1.375,-2.5 -2.78125,2.5 0.84375,1.9375 -3.0625,1.375 -0.53125,3.03125 -2.5,1.125 2.21875,2.46875 -0.5625,1.65625 9.6875,4.6875 0.8125,6.65625 0,3.59375 0.5625,4.6875 -4.96875,0 -1.375,1.9375 6.34375,5.25 3.59375,-1.9375 4.40625,5.25 -7.1875,0.53125 -0.8125,1.65625 -3.3125,0.84375 -2.21875,1.9375 -6.0625,1.40625 0.34375,2.0625 2.9375,2.75 5.84375,1.5625 0.1875,3.5 3.125,2.75 2.34375,-0.40625 3.34375,-4.09375 4.09375,-0.78125 6.4375,2.15625 5.46875,4.6875 1.5625,-1.96875 1.375,0 1.375,0.96875 1.15625,-0.5625 0.1875,-2.75 5.875,-1.375 1.9375,-2.53125 2.9375,-0.96875 4.09375,0 2.5625,2.71875 3.125,0.21875 0,-3.125 -1.5625,-2.15625 -2.75,-1.1875 -0.59375,-22.65625 0.21875,-6.4375 -2.34375,0.1875 -1.96875,-2.90625 1.5625,-2.5625 3.3125,3.125 2.9375,-2.34375 1.96875,-1.9375 0.375,-3.125 7.03125,-2.15625 0.78125,-1.75 5.46875,-0.1875 1.75,-2.15625 10.5625,-8.40625 6.625,-4.6875 5.6875,0.40625 0,3.90625 4.46875,-0.21875 2.40625,0.125 1.75,-4.0625 6.34375,-3.875 -1.375,-1.9375 1.65625,-4.40625 5.78125,0.8125 1.40625,-10.5 7.71875,-4.40625 0,-2.5 -5.8125,-5.78125 0,-4.4375 -3.3125,-5.5 -6.90625,-3.875 -0.53125,3.03125 -2.78125,0.28125 -0.8125,-3.03125 -2.78125,0.53125 -0.53125,3.875 -2.21875,-0.8125 -4.6875,-3.0625 -2.21875,1.125 0,-5.53125 -4.15625,-2.5 0.5625,-4.125 -3.3125,-3.59375 -1.375,-7.1875 -4.96875,-6.34375 -3.625,0.875 -0.78125,-2.71875 -1.96875,0 -0.375,2.34375 -5.0625,1.5625 -3.53125,-9 z");
    regions["provence-alpes-cote-dazur"] = map.path("m 447.34375,339.15625 -1.75,0.78125 -0.40625,2.9375 -3.5,0.40625 -0.59375,-2.75 -1.15625,-1.15625 -3.53125,0.375 -1.375,1.1875 -0.78125,4.09375 0.59375,0.96875 4.09375,0.40625 0.78125,2.53125 1.5625,0.78125 0,4.28125 -3.71875,-0.1875 -1.5625,1.75 -4.46875,-0.78125 -2.53125,2.15625 -1.78125,-0.78125 -2.53125,1.96875 0.96875,1.75 -1.5625,1.5625 -4.875,0 0,2.34375 1.5625,0.78125 -0.59375,1.375 -3.3125,1.34375 -4.09375,0.40625 -1.1875,3.71875 -0.1875,2.34375 2.15625,1.75 -2.15625,2.53125 -2.71875,-1.375 -3.125,-0.1875 -0.40625,1.75 1.96875,1.375 -2.375,1.5625 0.8125,3.3125 6.625,1.78125 1.1875,2.53125 1.9375,0.375 -0.78125,7.25 -1.15625,-1.375 -1.5625,-1.375 -1,2.9375 -1.75,1.5625 -2.53125,-0.1875 -2.9375,-2.15625 -0.78125,-2.53125 -5.46875,-0.40625 -4.09375,-0.375 -0.40625,-2.34375 1.375,-2.9375 -2.53125,2.15625 -3.90625,-0.40625 -0.78125,-1.375 2.71875,-3.6875 -2.71875,-2.5625 -2.75,0.21875 -2.125,3.3125 0.5625,3.5 3.3125,0.40625 -0.5625,1.5625 -2.5625,0.1875 -2.90625,2.9375 -0.78125,-0.96875 0.5625,-3.90625 -1.15625,-1.375 -5.28125,0.78125 -1.03125,2.09375 0.5625,0.3125 3.3125,5.5 0,4.4375 5.8125,5.78125 0,2.5 -7.71875,4.40625 -1.40625,10.5 -5.78125,-0.8125 -1.65625,4.40625 1.375,1.9375 -6.34375,3.875 -1.75,4.0625 6.1875,0.28125 8.21875,0.59375 1.5625,1.5625 -2.9375,0 -1.9375,3.3125 8.375,1.75 6.65625,-1.15625 -3.53125,-3.34375 2.34375,-1.9375 3.71875,1.5625 1.75,3.71875 11.15625,0.1875 2.90625,-1.1875 0.59375,1.78125 -3.125,2.71875 4.3125,0.1875 -0.78125,1.96875 -1.1875,1.375 9.5625,0 4.6875,1.5625 1,1.34375 3.5,1.5625 0.96875,3.90625 2.15625,0.40625 1.96875,-1.375 3.5,-2.15625 6.0625,0.59375 -0.1875,1.5625 -1.96875,0.96875 4.6875,0.21875 -1.15625,-1.1875 -0.40625,-2.53125 2.53125,-1.75 2.9375,0.96875 1.1875,0.375 0.96875,1.1875 1.375,-0.96875 0.375,-2.5625 1.5625,-1.34375 4.09375,0 1.1875,-1.78125 2.71875,0.78125 3.125,-1.34375 0,-5.09375 -4.09375,0.1875 3.125,-1.9375 1.5625,-2.15625 0.40625,-3.125 5.65625,-0.78125 3.3125,-3.71875 0.1875,-4.46875 3.90625,0.78125 1.375,-1.78125 1.96875,0.40625 0.1875,-6.0625 4.5,-0.375 3.90625,-3.53125 3.5,0 0.1875,-2.15625 3.53125,-2.125 -1.96875,-4.5 2.9375,-2.53125 -0.59375,-2.9375 4.3125,-1.375 1.15625,-4.28125 -0.5625,-2.9375 -1,-1.75 L 496.125,390 l -2.90625,0.21875 -9.1875,3.3125 -2.9375,0 -5.0625,-4.09375 -5.09375,-1.375 -2.9375,0 0,-3.53125 -4.09375,-2.53125 0,-3.90625 2.75,-0.375 -1.5625,-1.375 -1.96875,-0.59375 -0.96875,-2.53125 0.78125,-1.75 3.5,-3.71875 -0.5625,-2.75 2.34375,-2.53125 2.125,0.1875 0,-1.75 -2.71875,-1.375 -0.59375,-5.65625 -2.15625,-0.78125 -2.71875,0.40625 -5.09375,-2.5625 -0.78125,-5.84375 -2.90625,-0.96875 -1,-1.96875 -1.28125,-2.8125 -3.75,-0.1875 z");

    for(var regionName in regions) {
        regions[regionName].attr(style);
    }

    var animationSpeed = 500;
    var hoverStyle = {
        fill: "#A8BED5"
    }

    var i = 0;
    var arr_data = {};
    for(var regionName in regions) {
        arr_data[i] = regionName;
        (function (region) {

            region.attr(style);

            region[0].addEventListener("mouseover", function() {
                region.animate(hoverStyle, animationSpeed);
            }, true);

            region[0].addEventListener("mouseout", function() {
                region.animate(style, animationSpeed);
            }, true);

            region[0].addEventListener("click", function(d){
//                console.log(regions);
                alert(JSON.stringify(arr_data));
            });
            i++;

        })(regions[regionName]);
    }

<div style="max-width:900px; margin-left:auto; margin-right:auto; position:relative;">
    <div id="map"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js
"></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

试试这个

for(var regionName in regions) {
    (function (region) {

        region.attr(style);
        region.node.name = regionName; // set node name as regionName

        region[0].addEventListener("mouseover", function() {
            region.animate(hoverStyle, animationSpeed);
        }, true);

        region[0].addEventListener("mouseout", function() {
            region.animate(style, animationSpeed);
        }, true);

        region[0].addEventListener("click", function(d){
            alert(region.node.name); //alert on click
        });
    })(regions[regionName]);
}

Jsfiddle演示 https://jsfiddle.net/Lkr4y5bs/