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()方法。这些调用的警告是，除非您修改dataProvider的缩放属性（zoomLevel，zoomLatitude和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中

1 个答案: