AMCharts，使用外部按钮缩放到某些国家

Question

好的，所以我在 AMCharts 中有这张地图，其中有包含某些国家/地区的 ID、LAT 和 Long 的外部按钮，当我将鼠标悬停在它们上方时，我希望地图缩放并以该国家/地区为中心，这里是代码示例 ...

http://codepen.io/sheko_elanteko/pen/rjYvgE

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true,
    "areas": [ {
        "id": "EG",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "Egypt"
      }, {
        "id": "KZ",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "Kazakistan"
      }, {
        "id": "US",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "United States"
      }]
  },
  "areasSettings": {
    "color": "#999",
    "autoZoom": false,
    // "selectedColor": "#CC0000",
    "balloonText": "",
    "outlineColor": "#fff",
    "rollOverOutlineColor": "#fff"
  },
  "listeners": [{
    "event": "rendered",
    "method": function(e) {
      // Let's log initial zoom settings (for home button)
      var map = e.chart;
      map.initialZoomLevel = map.zoomLevel();
      map.initialZoomLatitude = map.zoomLatitude();
      map.initialZoomLongitude = map.zoomLongitude();
    }
  }]
});

function centerMap() {
  map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}

$("button.country").mouseenter(function(event) {
  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  var lat = $(this).data("lat");
  var long = $(this).data("long");
  country.color = '#000';
  // map.zoomToSelectedObject(country);
  map.zoomToLongLat(3, lat, long);
  country.validate();

}).mouseleave(function(event){
  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  country.color = '#CC0000';
  country.validate();
  centerMap();
});

如您所见，我硬编码了每个国家/地区的坐标以及缩放级别，但缩放功能无法正常工作，尤其是美国！

我也想知道是否有办法获取每个国家/地区的 LAT 和 Long，这样我就不会对它们进行硬编码。

AMCharts 中有一个名为 "zoomToSelectedObject" 的函数，但我试过了并没有成功地给它对象。

Answer 1

您可以尝试 amCharts 的 selectObject 方法。它的默认功能是缩放到提供的地图对象（您已经使用 getObjectById 获得的地图对象）。示例：

$("button.country").mouseenter(function(event) {

  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  map.selectObject(country);

}).mouseleave( ... );

只需确保将 "selectable": true 添加到 areasSettings。没有它，selectObject 方法将无法工作。

amCharts 地图具有出色的文档，您可以在此处找到：https://docs.amcharts.com/3/javascriptmaps/AmMap#selectObject。

AMCharts，使用外部按钮缩放到某些国家

AMChars, Zoom to certain countries with external buttons

javascript

zooming

amcharts

external-links