Я пытаюсь настроить карту, чтобы развернуть ее при нажатии на маркер. Тем не менее, я не могу заставить что-либо срабатывать при щелчке маркера.
здесь указана специфическая c часть (в самом конце функции ниже):
//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
};
Любая помощь очень ценится.