如何在 Amcharts 中单击地图气泡并调用服务器请求

Question

我想单击Am图表中的气泡并通过ajax调用调用服务器并在视图中操作一些数据是否可能？ 我正在通过 ajax 调用加载我的地​​图。下面是代码。我尝试使用 eventlistener clickable object ，但不会成功。

 function StatisticsMap(item, categoryID, statusID) {
    languageShortName = $("#languageShortName").val();
    $("[relf-map-tab]").removeClass("active");
    var url = "/" + languageShortName + "/saudiprojects/statistics/map-data?categoryID=" + categoryID + "&statusID=" + statusID;
    dataPoints = [];
    $.ajax({ type: "GET", url: url }).done(function (data) {
        $(data).each(function (index, value) {
            dataPoints.push({
                longitude: value.Longitude,
                latitude: value.Latitude,
                type: 'circle',
                color: '#E98C3E',
                label: value.CountNo,
                labelPosition: "middle",
                labelColor: "#ffffff",
                labelFontSize: 20,
                fixedSize: false,
                labelBackgroundAlpha: 1,
                labelBackgroundColor: "#E98C3E",
                height: 50 + (value.CountNo * 10),
                width: 50 + (value.CountNo * 10),
                centered: true,
                title: value.Status
            });
        });
        var map = AmCharts.makeChart("mapdiv", {
            "type": "map",
            "theme": "light",
            "dataProvider": {
                "map": "saudiArabiaHigh",
                "images": dataPoints
            }
        });
        $(item).addClass("active");
    });
}

这是我的 HTML

<div class="graph">
   <div id="mapdiv" style="width:100%;height:100%;"></div>
</div>

Answer 1

您可以使用地图上的clickMapObject 侦听器来捕捉点击的气泡。图像本身存储在事件的 mapObject 属性中：

  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]

请注意，为了使图像可点击，您必须在imagesSettings 中将selectable 设置为true：

  "imagesSettings": {
    "selectable": true
  }

下面的演示：

var dataPoints = [{
  longitude: 45,
  latitude: 25,
  type: 'circle',
  color: '#E98C3E',
  label: "1",
  labelPosition: "middle",
  labelColor: "#ffffff",
  labelFontSize: 20,
  fixedSize: false,
  labelBackgroundAlpha: 1,
  labelBackgroundColor: "#E98C3E",
  height: 60,
  width: 60,
  centered: true,
  title: "Example"
}];


var map = AmCharts.makeChart("mapdiv", {
  "type": "map",
  "theme": "light",
  "dataProvider": {
    "map": "saudiArabiaHigh",
    "images": dataPoints
  },
  "imagesSettings": {
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]
});

#mapdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/saudiArabiaHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="mapdiv"></div>