Question

大家好，这是我的JavaScript代码，可以让矢量地图的ip标记显示在线ip ..

所有ips都有3个不同的端口，如：ip1：1020或ip2：5050或ip3：6969

我可以从ip.txt文件中读取的ips格式如下：

>>> import itertools
>>> print([''.join(i) for i in itertools.combinations('ABCD', 2)])
['AB', 'AC', 'AD', 'BC', 'BD', 'CD']
>>>

这是我的主要脚本

{"relays":[{
"or_addresses":["2.176.82.122:1020"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.177.37.250:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.178.57.250:6969"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.18.5.20:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.78.7.25:1020"],"latitude":35.6961059570313,"longitude":51.423095703125}
]}

我的问题是我如何为不同的PORTS制作不同的风格????！我的意思是我想把这个样式用于port = 1020：

<script>
$(document).ready(function(){
$('#worldmap').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
  initial: {
    fill: '#cc6600',
    stroke: '#222222',
    r: 2
  }
},
backgroundColor: '#CCC',
markers: [
]
});

map = $('#worldmap').vectorMap('get', 'mapObject');
$.getJSON('http://127.0.0.1/bantools/ip/ip.txt', function(data){
$.each(data.relays, function(idx, relay)
    {
        map.addMarker(relay.or_addresses[0], {'latLng' : [relay.latitude, relay.longitude], "name" : relay.or_addresses[0]});
    });
});
});
</script>

并且对于port = 5050，我想使用这种风格：

markerStyle: {
  initial: {
    fill: '#cc6600',
    stroke: '#222222',
    r: 2
  }
}

和其他港口......

Answer 1

http://jsbin.com/womoqa/edit?js,output

＆＃13;

$(function(){
  $('#world-map-markers').vectorMap({
    map: 'world_mill_en',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    backgroundColor: '#383f47',
    markers: [
      {latLng: [41.90, 12.45], name: 'Vatican City', 
       style: {
         fill: '#cc6600',
         stroke: '#222222',
         r: 5
       }},
      {latLng: [17.11, -61.85], name: 'Antigua and Barbuda',
       style: {
         fill: '#ff0000',
         stroke: '#222222',
         r: 8
       }},
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe',
       style:{
        fill: '#F8E23B',
        stroke: '#383f47'
      }}
    ]
  });
});

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>  
    <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
    <link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.2.css">
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="world-map-markers" style="width: 720px; height: 400px"></div>
  </body>
</html>

＆＃13;

Answer 2

我想设置初始标记样式，您需要遍历所有数据并构建比例（分组），然后由jvectormap使用它来获取标记的值。

获取json数据的脚本看起来不错，因此您首先显示地图，然后将标记放在它们上面。我认为这是一个很好的方法，你的脚本只是缺少一个简单的函数来准备标记样式，如果我在这里没错。

我略微更改了您的数据，因为所有坐标都指向同一位置并且标记重叠。如果您解释这是否是您必须处理的内容，那么它也会很有用。

这是一个简单的函数来获取标记的样式，它就像一个无聊的开关：

function getMarkerStyle(port) {
    var styles = {'1020': {fill: '#cc6600', stroke: '#222222',r: 2},
                  '5050': {fill: '#aaa',stroke: '#bbb',r: 2}};
    var unknown = {fill: '#F00',stroke: '#000',r: 2};
    return styles[port] || unknown;
}

这应该在你的getJSON回调函数中，而不是 $。每个我在这里使用经典 for循环：

for (var i = 0, l = logFile.relays.length; i < l; i++) {
    var port = logFile.relays[i].or_addresses[0].split(':')[1];
    var id = logFile.relays[i].or_addresses[0].split(':')[0];
    var coords = [logFile.relays[i].latitude, logFile.relays[i].longitude];
    var name = id;
    var style = getMarkerStyle(port);
    mapObj.addMarker(id, {latLng: coords, name: name, style: style}, null);
}

您只需要将样式放在addMarker函数的第二个参数中。

使用jvectormap-2.0.2进行测试

矢量地图中不同端口的不同风格

2 个答案: