更改 javascript 地图中的图钉颜色？

Question

我们正在使用 amcharts 地图，到目前为止，一切看起来都不错。

我想做的是根据来自 json 流的一些值更改图钉的颜色。

javascript:

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;
  }
}

});

效果很好，但我想更改地图中显示的图钉。理想情况下，我想使用从网上下载的图片（jpg、png 等）。

所以假设我的 json 看起来像这样：

[{"title":"Site1","longitude":18.4262,"latitude":-67.1483,"inservice":true},
{"title":"Site2","longitude":18.3663,"latitude":-66.1887,"inservice":false}]

如何更改引脚 color/size/font（甚至图像）以便如果 "inservice" 为真，则使用一个引脚。如果为假，则使用另一个引脚。

我尝试使用 SO 片段工具，但它没有渲染地图。所以在这里，在 jsfiddle 中：https://jsfiddle.net/wn61bfqb/

 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;
    }
  }
});

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

<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>

谢谢。

Answer 1

在循环遍历数据集的 dataLoader 函数中添加检查 inservice 是否为真。基于此检查添加颜色。

  for (var i = 0; i < data.length; i++) {
    var image = data[i];
    image.type = "circle";
  if(data[i].inservice){
     image.color = 'green'; // if inservice is true
  } else {
     image.color = 'red'; // if inservice is false or undefined 
  }
    mapData.images.push(image);
  }

我注意到您为创建此地图而调用的终点尚未返回 inservice 字段。所以直到那时我们最终一直显示红色图钉。

jsFiddle link

更改 javascript 地图中的图钉颜色？

Change pin color in javascript map?

html

javascript

json

amcharts