Question

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

代码：

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功能。此函数是一个帮助程序，它允许您在单个调用中创建图表/映射，使用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配置的图例。图例同时显示在地图上，没有调整大小或显示它所需的任何内容。

Ammaps图例仅出现在窗口大小调整上

1 个答案: