在jVectorMap上的某些圆圈标记上放置不同的笔触颜色和宽度

时间:2015-01-23 14:43:46

标签: javascript jquery css jvectormap

我正在用jVectorMap创建一个地图。由于地理坐标lat / lng,我画了圈子来代表地震,如下所示:

markers: [
     {"latLng":[33.428,-116.4253333],"name":"19km NNW of Borrego Springs, California","mag":3.37,"depth":13.9},
     {"latLng":[33.5046667,-116.507],"name":"16km ESE of Anza, California","mag":3.22,"depth":15.44},
     {"latLng":[40.8905,-111.6832],"name":"16km E of Cennterville, Utah","mag":3.3,"depth":11.9},
     {"latLng":[36.7621,-98.0439],"name":"27km E of Cherokee, Oklahoma","mag":3.2,"depth":11.68}
]

我想为其中一些圆圈添加更大的笔触宽度和不同的笔触颜色。例如,使用lat / lng的圆圈 [40.8905,-111.6832],[36.7621,-98.0439]。

这是地图的jsFiddle

有没有办法这样做?我一直在尝试很多东西,但似乎都没有用,类似的问题我找不到答案。

1 个答案:

答案 0 :(得分:0)

绝对不是最好的解决方案,但只需一个简单的选项即可完成任务而不会让你的手太脏,可能会使用CSS。

.jvectormap-marker:nth-child(9){
   stroke-width: 20;
   stroke: red;
   fill: #FFFF00;
}

.jvectormap-marker:nth-child(10){
   stroke: #00FFFF;
}

更新小提琴...... http://jsfiddle.net/ozke/dvLzsLrd/3/