Javascript 为fiddle添加路径,Raphael js
我正在用Raphael.js制作一张墨西哥地图,我正在尝试将我的结果做一个小提琴,但我不知道应该在小提琴中添加地图路径的位置。我试图在我已经拥有的Javascript上下添加路径,但我什么也没做 以下是我所拥有的: JavascriptJavascript 为fiddle添加路径,Raphael js,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在用Raphael.js制作一张墨西哥地图,我正在尝试将我的结果做一个小提琴,但我不知道应该在小提琴中添加地图路径的位置。我试图在我已经拥有的Javascript上下添加路径,但我什么也没做 以下是我所拥有的: Javascript jQuery(function($) { var r = Raphael('chaptersMap', 900, 600); r.safari(); var _label = r.popup(50, 50, "").hide(); attributes = {
jQuery(function($) {
var r = Raphael('chaptersMap', 900, 600);
r.safari();
var _label = r.popup(50, 50, "").hide();
attributes = {
fill: '#002652',
stroke: '#939393',
'stroke-width': 1,
'stroke-linejoin': 'round'
};;
arr = new Array();
/* para cada path de nuestra fuente svg vamos a dibujar un path del tipo Raphael */
for (var correntPath in paths) {
var obj = r.path(paths[correntPath].path);
arr[obj.id] = correntPath;
obj.attr(attributes);
/* Al estar encima el mouse de nuestro correntPath, Cambiamos el color y se restablece cuando se deja */
obj.hover(function() {
this.animate({
fill: '#F79729',
stroke: '#8E8D90'
}, 300);
bbox = this.getBBox();
_label.attr({
text: paths[arr[this.id]].name
}).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
}, function() {
this.animate({
fill: attributes.fill,
stroke: attributes.stroke
}, 300);
_label.hide();
});
/* Accion cuando le damos click a alguna parte de nuestro mapa */
obj.click(function() {
location.href = paths[arr[this.id]].url;
});
} //fin For
});
CSS
HTML
谢谢,您的路径容器在哪里I.e:array、object、etcI都有路径,但通常我只是将它们放在不同的js文件中,我不知道如何放置容器来容纳它们。
#mapa_mexico {
border:8px solid #002652;
background: #F0F0F0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f2f8', endColorstr='#d1f2f8',GradientType=0 );
width:650px;
height:442px;
margin:auto;
padding:2px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
<div id="mapa_mexico">
<div id="chaptersMap">
</div>
</div>