以编程方式在钻取地图 amchart 中放置标记

Question

我有一个地图，它是一个向下钻取的地图。它从大洲观点到国家观点。我的目标是根据所选国家/地区动态放置标记（在向下钻取之后）。

在这个例子中，我想在柏林（德国）放置一个标记，但是这个标记没有被创建。

示例：https://codepen.io/ms92o/pen/gjMPEJ?editors=1111

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "light",

    "areasSettings": {
        "autoZoom": true,
        "rollOverOutlineColor": "#9a7bca",
        "selectedColor": "#9a7bca",
        "color": "#a791b4",
        "rollOverColor": "#9a7bca"
    },

    "zoomControl": {
        "buttonFillColor": "#a6bd7f",
        "buttonRollOverColor": "#9a7bca"
    },

    "dataProvider": continentsDataProvider,
    "objectList": {
        "container": "listdiv"
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function (event) {
            console.log(event);
            // TODO: how to create some markers here based on the selected country?
            let rep = { title: 'Berin', latitude: '52.520', longitude: '13.409779' };
            rep.svgPath = targetSVG;
            rep.zoomLevel = 3;
            rep.scale = 1.2;
            rep.label = rep.title;
            map.dataProvider.images.push(rep);
        }
    }]
});

Answer 1

您需要调用地图的 validateNow()/validateData() methods whenever you update the map with new areas/markers or changes to its properties. The caveat of these calls is that they reset the map's zoom position unless you modify the dataProvider's zoom properties (zoomLevel, zoomLatitude and zoomLongitude)，这也会影响主页按钮，除非您事后重置它们。

这是一个添加标记的解决方案，同时确保缩放级别保持不变，然后修复主页按钮：

"listeners": [{
    "event": "clickMapObject",
    "method": function (event) {

        let rep = { title: 'Berin', latitude: '52.520', longitude: '13.409779' };
        rep.svgPath = targetSVG;
        rep.zoomLevel = 3;
        rep.scale = 1.2;
        rep.label = rep.title;
        map.dataProvider.images.push(rep);
        //delay the update so that the click+zoom action still occurs before
        //adding the marker
        setTimeout(function() {
          //preserve current zoom level on update
          map.dataProvider.zoomLevel = map.zoomLevel();
          map.dataProvider.zoomLatitude = map.zoomLatitude();
          map.dataProvider.zoomLongitude = map.zoomLongitude();
          map.validateNow(); //add marker

          //reset the zoom values so that the home button zooms 
          //completely out when clicked
          map.dataProvider.zoomLevel = 0;
          map.dataProvider.zoomLatitude = undefined;
          map.dataProvider.zoomLongitude = undefined;
        }, (map.zoomDuration + .5) * 1000); 
    }
}]

Updated codepen

以编程方式在钻取地图 amchart 中放置标记

Programatically placing marker in drilldown map amchart

amcharts