Question

我的javascript地图正在从json流中读取，如下所示：

[{"title":"Site1","latitude":18.3764,"longitude":-67.1819},    
{"title":"Site2","latitude":18.2001,"longitude":-65.8081},
{"title":"Site3","latitude":18.3878,"longitude":-66.0998}]

正确绘制点数，这太棒了。

到此json我将添加inService字段。 inService字段将是以下任一选项：[Monday, Tuesday, Sunday, Thursday]，json将如下所示：

[{"title":"Site1","latitude":18.3764,"longitude":-67.1819,"inService":"Monday"},    
 {"title":"Site2","latitude":18.2001,"longitude":-65.8081,"inService":"Tuesday"},
 {"title":"Site3","latitude":18.3878,"longitude":-66.0998,"inService":"Sunday"},
 {"title":"Site4","latitude":18.1246,"longitude":-66.2607,"inService":"Thursday"}]

在amcharts网站上，我看到了这两个新图标：One that blinks和另一个a dot with a circle around it。

所以我的问题是：使用上面的json，如何为inService中的不同类型的值指定一个闪烁的引脚？

例如：

Monday：闪烁蓝色针
Tuesday：闪烁的黑色针
Sunday：白点周围有一个圆圈（没有闪烁）
Thursday红点周围有一个圆圈（没有闪烁）

最后，我们将添加其他类型的状态。我怎样才能改变形状？例如，顶部的引脚将是方形而不是圆形？

感谢您的帮助。

我尝试使用SO代码预览，但它没有渲染地图。所以我也将它包含在jsfiddle中：

＆＃13;

	AmCharts.makeChart("mapdiv", {
  "type": "map",
  "theme": "light",
  "imagesSettings": {
    "rollOverColor": "#089282",
    "rollOverScale": 1,
    "selectedScale": 0.5,
    "selectedColor": "#089282",
    "color": "#13564e",
    "selectable": false,
    "bringForwardOnHover": false
  },
  "areasSettings": {
    "color": "#D3D3D3",
	"autoZoom": true
  },  
  "data": {
    "map": "puertoRicoHigh",
    "getAreasFromMap": true
  },
  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/716619/30189.json",
    "format": "json",
    "showErrors": true,
    "postProcess": function(data, config, map) {
      // create a new dataProvider
      var mapData = map.data;
      
      // init images array
      if (mapData.images === undefined)
        mapData.images = [];
      
      // create images out of loaded data
      for(var i = 0; i < data.length; i++) {
        var image = data[i];
        image.type = "circle";
        mapData.images.push(image);
      }
      return mapData;
    }
  }
});

＆＃13;

#mapdiv {
  width: 100%;
  height: 300px;

＆＃13;

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/puertoRicoHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.js"></script>
<div id="mapdiv"></div>

＆＃13;

更改为javascript地图中的闪烁引脚？

0 个答案: