问题修订版 1 的初始回复
推荐方法
根据您拥有的信息，可能更容易考虑使用 MapChart 对象上可用的zoomToGeoPoint方法，例如
//assuming the selected country is as follows
var country = {
"dId": 23280,
"lat": 36.1676717,
"long": -94.1298177,
"loc": "Springdale AR",
"color":"red",
};
this.mapChart.zoomToGeoPoint({latitude:country.lat,longitude:country.long},17)
17您想要的缩放级别在哪里。zoomToMapObject在处理图表事件时特别有用。
更具体到您的问题
但是，如果您想使用zoomToMapObject方法，可以根据您的示例考虑以下方法。
对于数据集中的每个数据点，并使用存储的初始数据，am4geodata_worldLow其中每个多边形具有“id”（例如，提取第一个的 id am4geodata_worldLow.features[0].id），您可以使用 lat/lng 坐标确定每个国家/地区最接近每个多边形的中心。
在MapChart您存储的对象中this.mapChart，您必须检查多边形或 MapObjects 的多个系列（模糊地视为图层）。这些可以使用以下方法提取：
var mapPolygons = this.mapChart.series.values.flatMap(function(seriesItem){return seriesItem.mapPolygons.values;});
然后，您可以构建一个数据结构，将您的每个自定义国家/地区映射到地图中可用的 id（例如 object {"your-country-id":mapPolygonObject}）
对于每个mapPolygon您可以使用提取坐标点
var coordinates = mapPolygon.points[0][0]; //returns an array of x,y coordinates
//eg
coordinates =
[{"x":691.2713756097037,"y":137.68935508639663},{"x":691.2544487420046,"y":137.69150482342081},{"x":691.2544487420046,"y":137.67239542245633},{"x":691.2695833531237,"y":137.6702455263596}];
然后，您可以使用这些点作为边界找到该多边形的中心/质心，然后对于您的每个国家点，您将找到多边形中心点和您所在国家/地区之间的欧几里德距离。最短的距离可以假设这个国家与这一点有关。可能需要考虑距离（注意。由于您使用的是坐标，请务必考虑至少 5 个小数点）因为 50,000 英里（请注意您的坐标系，了解将纬度/经度距离转换为米/英里的方法）可能意味着这些是不同的地方。
然后，您可以提取 id 并构建地图对象以供稍后在脚本中使用。这可能是耗时且计算密集型的，如果您之前执行此操作并存储必要的引用以供以后使用，理想情况下会更好。
另一种搜索 id 的方法
此外，如果您有国家/地区 ID，那么这将是更简单的搜索，如下所示：
//assuming the selected country is as follows
var country = {
"dId": 23280,
"lat": 36.1676717,
"long": -94.1298177,
"loc": "Springdale AR",
"color":"red",
};
//for this example I am extracting the country id from the object,it would be ideal to have it otherwise
//NB. country ids are also available in the `am4geodata_worldLow` used to initialize the map
var countryId = country.loc.split(" ")[1]; //this would return the country code - 'AR'
//we will now search the created chart for mapObjects with this id
//this will give us an array of map objects/polygons with the id if found
var possibleMapObjects = this.mapChart.series.values.map(function(seriesItem){
return seriesItem.getPolygonById(countryId)
}).flat();
if(possibleMapObjects.length > 0){
// we have found a map object
var countryMapObject = possibleMapObjects[0]; //taking the first item of array
//now we can zoom to map object
//the 3rd parameter true implies centering the map
this.mapChart.zoomToMapObject(countryMapObject,17,true)
}
问题修订 2 (Edit1) 的初始回复
根据更新的代码，我注意到了一些问题，我无法在您的地图上看到标记，因此我进行了一些修改。此外，修改现在允许您通过 id 检索标记/地图对象，因为我已经使用您使用的 id 扩充了数据，请参阅下面的更新代码。
我创建了一个下拉/选择节点来模拟 onchange 事件，在回调/事件处理程序中，onCountryChange您将看到我们如何通过我们指定的新伪 ID 检索标记并调用操作（我将打开一个弹出窗口）到文档化的 MapImage API
locationData = [
{
"dId": 28046,
"lat": 33.8627681,
"long": -117.8870831,
"loc": "Fullerton CA",
"color": "red"
},
{
"dId": 25535,
"lat": 31.5649775,
"long": -110.2591639,
"loc": "Sierra Vista AZ",
"color": "yellow"
},
{
"dId": 31222,
"lat": 33.4308114,
"long": -70.7828727,
"loc": "Pudahuel Metropolitana",
"color": "green"
},
{
"dId": 23280,
"lat": 36.1676717,
"long": -94.1298177,
"loc": "Springdale AR",
"color": "red"
},
].map(function(place) {
place.id = place.dId;
return place;
});
this.mapChart = am4core.create("productsMap", am4maps.MapChart);
this.mapChart.geodata = am4geodata_worldLow;
this.mapChart.projection = new am4maps.projections.Miller();
this.polygonSeries = this.mapChart.series.push(new am4maps.MapPolygonSeries());
this.polygonSeries.exclude = ["AQ"];
this.polygonSeries.useGeodata = true;
this.polygonSeries.calculateVisualCenter = true;
let imageSeries = this.mapChart.series.push(new am4maps.MapImageSeries());
var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "lat";
place.propertyFields.longitude = "long";
imageSeries.data = locationData;
var circle = place.createChild(am4core.Circle);
circle.propertyFields.fill = "color";
/// code below made circles visible and used value in {loc} / location name as tooltiptext
circle.width = 20;
circle.height = 20;
circle.nonScaling = false;
circle.tooltipText = "{loc}";
circle.horizontalCenter = "middle";
circle.verticalCenter = "bottom";
var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
circle2.radius = 3;
circle2.propertyFields.fill = "color";
circle2.events.on("inited", function(event){
animateBullet(event.target);
})
function animateBullet(circle) {
var animation = circle.animate([{ property: "scale", from: 1, to: 5 },
{property: "opacity", from: 1, to: 0 }], 1000, am4core.ease.circleOut);
animation.events.on("animationended", function(event){
animateBullet(event.target.object);
})
}
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 3,
"max": 10,
"dataField": "value",
});
//just initializing the ui (you have already done this in angular)
var ddlPlaceChooser = document.getElementById("ddlPlaceChooser");
locationData.map(function(location) {
var option = document.createElement("option");
option.value = location.id;
option.innerText = location.loc;
return option;
})
.forEach(function(option) {
ddlPlaceChooser.appendChild(option)
})
function onCountryChange(event) {
//however you retrieve the selected id
var placeId = ddlPlaceChooser.selectedOptions[0].value;
//retrieve map object
var mapObject = imageSeries.getImageById(placeId);
//zoom to map object
mapChart.zoomToMapObject(mapObject, 17, true);
//optionally open popup with message of choice
mapObject.openModal("You choose me!")
//mapObject.openPopup("You choose me!")
}
ddlPlaceChooser.addEventListener('change', onCountryChange)
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div>
<label for="placeChooser">Choose Place</label>
<select id="ddlPlaceChooser" name="placeChooser"></select>
</div>
<hr />
<div id="productsMap"></div>
