在 mapImageSeries 上的 AmCharts 命中事件不起作用

Question

我正在尝试将我的地图设置为在单击标记时向下钻取。但是，单击标记时我无法触发任何内容。

这里是具体部分（它在下面函数的最后）：

//want to zoom in when group is clicked, but right now can't get any function to fire
officeGroupsTemplate.events.on("hit", function(ev) {
   alert("Clicked on", ev.target);
});

你可以在这里看到一个活生生的例子：https://awmhomes.com/find-a-loan-officer/

function awm_footer_map_script(){ 
    $locations = awm_locations();
    $states = awm_state_codes($locations);
    $js_states = json_encode($states);
    $offices = awm_branches($locations, false);
    $groups = awm_groups($locations, true);
    ?>
    <!-- Chart code -->
    <script>
        am4core.ready(function() {
            //licensed states array
            <?php echo "var awm_states = ". $js_states . ";\n"; ?>
            // Theme
            am4core.useTheme(am4themes_animated);
            // Create map instance
            var chart = am4core.create("awmTeamMap", am4maps.MapChart);
            //chart.maxZoomLevel = 64;
            // Set map definition
            chart.geodata = am4geodata_usaHigh;
            // Set projection
            chart.projection = new am4maps.projections.AlbersUsa();
            //add map key
            chart.legend = new am4maps.Legend();
            chart.legend.valign = 'top';
            chart.legend.itemContainers.template.clickable = false;
            chart.legend.itemContainers.template.focusable = false;
            chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
            //add zoom buttons
            chart.zoomControl = new am4maps.ZoomControl();
            chart.zoomControl.align = "left";
            chart.zoomControl.valign = "top";
            // Create map polygon series (not licensed)
            var statesExc = chart.series.push(new am4maps.MapPolygonSeries());
            statesExc.name = "Not Licensed";
            statesExc.useGeodata = true;
            statesExc.calculateVisualCenter = true;
            statesExc.exclude = awm_states;
            statesExc.fill = am4core.color("#cccccc");
            statesExc.tooltip.disabled = true;
            statesExc.hiddenInLegend = true;
            //template
            var statesExcTemplate = statesExc.mapPolygons.template;
            statesExcTemplate.tooltipText = "{name}";
            statesExcTemplate.fill = am4core.color("#cccccc");
            statesExcTemplate.stroke = am4core.color("#ffffff");

            // Create map polygon series (licensed)
            var statesInc = chart.series.push(new am4maps.MapPolygonSeries());
            statesInc.name = "Licensed";
            statesInc.useGeodata = true;
            statesInc.calculateVisualCenter = true;
            statesInc.include = awm_states;
            statesInc.fill = am4core.color("#1273b9");
            //template
            var statesIncTemplate = statesInc.mapPolygons.template;
            statesIncTemplate.tooltipText = "{name}";
            statesIncTemplate.fill = am4core.color("#1273b9");
            statesIncTemplate.stroke = am4core.color("#ffffff");

            // Create image series for local office markers
            var officeMarkers = chart.series.push(new am4maps.MapImageSeries());
            officeMarkers.name = 'Offices';

            // Create a circle image in image series template so it gets replicated to all new images
            var officeMarkersTemplate = officeMarkers.mapImages.template;
            var officeMarkersCircle = officeMarkersTemplate.createChild(am4core.Circle);
            officeMarkersCircle.radius = 4;
            officeMarkersCircle.fill = am4core.color("#000000");
            officeMarkersCircle.stroke = am4core.color("#FFFFFF");
            officeMarkersCircle.strokeWidth = 2;
            officeMarkersCircle.nonScaling = true;
            officeMarkersCircle.tooltipText = "{title}";

            /** Add data for the image series markers (offices) **/
            <?php awm_office_markers($offices, 'officeMarkers'); ?>

            /**Image Series for grouped markers**/
            var officeGroups = chart.series.push(new am4maps.MapImageSeries());
            officeGroups.dataFields.value = 'groups';
            officeGroups.hiddenInLegend = true;

            var officeGroupsTemplate = officeGroups.mapImages.template;
            officeGroupsTemplate.verticalCenter = "middle";
            officeGroupsTemplate.horizontalCenter = "middle";
            officeGroupsTemplate.propertyFields.latitude = "latitude";
            officeGroupsTemplate.propertyFields.longitude = "longitude";
            officeGroupsTemplate.tooltipText = "{name}:\n[bold]{offices} offices[/]";

            var officeGroupsCircle = officeGroupsTemplate.createChild(am4core.Circle);
            officeGroupsCircle.radius = 10;
            officeGroupsCircle.fillOpacity = 0.7;
            officeGroupsCircle.verticalCenter = "middle";
            officeGroupsCircle.horizontalCenter = "middle";
            officeGroupsCircle.nonScaling = true;

            var officeGroupsLabel = officeGroupsTemplate.createChild(am4core.Label);
            officeGroupsLabel.text = "{offices}";
            officeGroupsLabel.fill = am4core.color("#fff");
            officeGroupsLabel.verticalCenter = "middle";
            officeGroupsLabel.horizontalCenter = "middle";
            officeGroupsLabel.nonScaling = true;

            var heat = officeGroups.heatRules.push({
                target: officeGroupsCircle,
                property: "radius",
                min: 10,
                max: 30
            });

            <?php awm_group_markers($groups, 'officeGroups'); ?>

            //want to zoom in when group is clicked, but right now can't get any function to fire
            officeGroupsTemplate.events.on("hit", function(ev) {
                alert("Clicked on", ev.target);
            });

        }); // end am4core.ready() 
    </script>
    <?php 
};

非常感谢任何帮助。

Answer 1

查看您在网站上的代码，您似乎正在MapImageSeries 中创建标记，然后在模板上添加事件处理程序。

当您调用 series.mapImages.create() 时，会创建 series.mapImages.template 的精确副本，包括属性值和事件。

但是，由于您是在在在模板上添加所述事件侦听器之前执行此操作，因此它不会添加到已创建的实际标记中。

只需在创建实际标记之前移动您的事件声明。