javascript - Ammaps 图例仅出现在窗口调整大小时

Question

我正在使用 ammaps 创建 map 并尝试创建图例。我遇到了一个奇怪的问题，图例没有出现在初始加载时，但只出现在窗口调整大小时。无论窗口大小如何，在任何调整大小时，图例都会变得可见(非常奇怪吧？)。

代码:

var icon = "M9.875,0.625C4.697,0.625,0.5,4.822,0.5,10s4.197,9.375,9.375,9.375S19.25,15.178,19.25,10S15.053,0.625,9.875,0.625";
var map = AmCharts.makeChart( "mapdiv", {
    /**
    * this tells amCharts it's a map
    */
    "type": "map",

    /**
    * create data provider object

    */
    "dataProvider": {
      "mapURL": "https://raw.githubusercontent.com/ggwc82/amcharts/master/unitedKingdomLow.svg",
      "getAreasFromMap": false,

      "images": [ {
        "latitude": 51.5074,
        "longitude": 0.1278,
        "svgPath": icon,
        "scale": 0.7,
        "label": "Dagenham Factory",
        "labelBackgroundColor": "#ffffff",
        "labelColor": "#696D6E",
        "labelFontSize": 14,
        "labelShiftY": 00,
        "color": "#D30000",
        "title": "1 Warning",
        "url": "http://www.google.co.uk",
        "description": "DRM with id 09 is offline"
      },
      {
        "latitude": 53.4808,
        "longitude": -2.2426,
        "svgPath": icon,
        "scale": 0.7,
        "label": "Manchester Factory",
        "labelBackgroundColor": "#ffffff",
        "labelColor": "#696D6E",
        "labelFontSize": 14,
        "labelShiftY": 0,
        "color": "#40D300",
        "title": "No Issues",
        "url": "http://www.google.co.uk",
        "description": ""
      },
      {
        "latitude": 54.9783,
        "longitude": -1.6178,
        "svgPath": icon,
        "scale": 0.7,
        "label": "Newcastle Factory",
        "labelBackgroundColor": "#ffffff",
        "labelColor": "#696D6E",
        "labelFontSize": 14,
        "labelShiftY": 0,
        "color": "#D3D000",
        "title": "2 Alerts",
        "url": "http://www.google.co.uk",
        "description": "DRM with id 23 is inactive. DRM with id 25 is inactive."
      }
    ],

  },


  /**
  * create areas settings
  * autoZoom set to true means that the map will zoom-in when clicked on the area
  * selectedColor indicates color of the clicked area.
  */
  "areasSettings": {
    "autoZoom": true,
    "unlistedAreasColor": "#C8E1D6",
    "selectedColor": "#CC0000"

  },
  "zoomControl": {
    "zoomControlEnabled": false,
    "homeButtonEnabled": true,
    },
  "dragMap": false,
  "showDescriptionOnHover": true,
  "allLabels": [
        {
        "text": "Default Factory View - UK Sites",
        "bold": true,
        "size": 20,
        "color": "#696D6E",
        "align": "center",
        "y": 100
        }
    ],

} );


var legend = new AmCharts.AmLegend();
console.log("hello");
map.addLegend(legend,"legenddiv");
legend.data = [{title:"first", color:"#CC0000", markerType: "circle"}, 
               {title:"second", color:"#00CC00", markerType: "circle"},
              {title:"second", color:"#ffff00", markerType: "circle"}]

Answer 1

您正在使用 makeChart 函数。此函数是一个帮助程序，允许您在一次调用中创建图表/ map ，使用 JSON 对其进行配置，将其显示在作为第一个参数传递的容器 div 中，并取回之前创建的实例。

您正在将图例添加到您的实例，但当您点击添加图例的代码时，它已经由 makeChart 助手呈现。因此，在将图例添加到已呈现的图表时，它只会在重新呈现时可见，这发生在您调整窗口大小时。

如 documentation 中所述，AmMap 类无法显式实例化，因此必须使用 makeChart 方法，但您也可以在 JSON 配置中配置您的图例，而不是稍后再做。

/**
 * Legend
 */
"legend": {
  "width": 400,
  "backgroundAlpha": 1,
  "backgroundColor": "#fff",
  "borderColor": "#000",
  "borderAlpha": 1,
  "bottom": 15,
  "right": 15,
  "horizontalGap": 10,
  "data": [{
    "title": "first",
    "color": "#CC0000",
    "markerType": "circle"
  }, {
    "title": "second",
    "color": "#00CC00",
    "markerType": "circle"
  }, {
    "title": "third",
    "color": "#ffff00",
    "markerType": "circle"
  }]
},

我放了一个 little fiddle根据您的问题，包括在 JSON 中配置的图例。图例与 map 同时显示，无需调整大小或进行任何显示。