amcharts - AmChart map 中如何手动触发事件？

Question

在 AmMap 中，存在“homeButtonClicked”事件，当您单击主页按钮时会触发该事件。

我想手动触发该事件。有什么办法可以做到吗？

Answer 1

要完全缩小 map ，请使用 zoomToSelectedObject() ant 传入 map.dataProvider 作为参数。

即:

map.zoomToSelectedObject(map.dataProvider);

工作演示:

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": true
  }
} );

function zoomOut() {
  map.zoomToSelectedObject(map.dataProvider);
}

#chartdiv {
  width: 100%;
  height: 250px;
}

<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="Zoom Out" onclick="zoomOut();" />
<div id="chartdiv"></div>

<小时/>

要在 map 或任何 amCharts 对象上触发事件，您可以使用 fire() 方法。即:

map.fire("homeButtonClicked", {
  type: "homeButtonClicked",
  chart: map
});

这是一个工作示例:

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": true
  }
} );

map.addListener("homeButtonClicked", function(event) {
  alert('homeButtonClicked');
});

function testEvent() {
  map.fire("homeButtonClicked", {
    type: "homeButtonClicked",
    chart: map
  });
}

#chartdiv {
  width: 100%;
  height: 280px;
}

<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="trigger event" onclick="testEvent();" />
<div id="chartdiv"></div>