Javascript amCharts地图在页面刷新时不加载圆圈

我对amCharts maps有一个问题，每当我刷新页面时，我的圆圈就会消失，但我可以放大，圆圈就会出现

我不确定该怎么做，也不确定是不是因为我的公司使用了这种古怪的“定制”CMS。我已经试着在我自己的网站上运行它，它仍然在做同样的事情。我对amCharts和javascript相当陌生

<!-- Resources -->
<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://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Exclude Antartica
polygonSeries.exclude = ["AQ"];

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#F0F0F0");

// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#cccccc");

// Zoom control
chart.zoomControl = new am4maps.ZoomControl();

// Add image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.mapImages.template.propertyFields.longitude = "longitude";
imageSeries.mapImages.template.propertyFields.latitude = "latitude";
imageSeries.mapImages.template.propertyFields.url = "url";
imageSeries.data = [ {
...

// add events to recalculate map position when the map is moved or zoomed
chart.events.on( "mappositionchanged", updateCustomMarkers );

// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers( event ) {

  // go through all of the images
  imageSeries.mapImages.each(function(image) {
    // check if it has corresponding HTML element
    if (!image.dummyData || !image.dummyData.externalElement) {
      // create onex
      image.dummyData = {
        externalElement: createCustomMarker(image)
      };
    }

    // reposition the element accoridng to coordinates
    var xy = chart.geoPointToSVG( { longitude: image.longitude, latitude: image.latitude } );
    image.dummyData.externalElement.style.top = xy.y + 'px';
    image.dummyData.externalElement.style.left = xy.x + 'px';
  });

}

// this function creates and returns a new marker element
function createCustomMarker( image ) {

  var chart = image.dataItem.component.chart;

  // create holder
  var holder = document.createElement( 'div' );
  holder.className = 'map-marker';
  holder.title = image.dataItem.dataContext.title;
  holder.style.position = 'absolute';

  // maybe add a link to it?
  if ( undefined != image.url ) {
    holder.onclick = function() {
      window.location.href = image.url;
    };
    holder.className += ' map-clickable';
  }

  // create dot
  var dot = document.createElement( 'div' );
  dot.className = 'dot';
  holder.appendChild( dot );

  // create pulse
  var pulse = document.createElement( 'div' );
  pulse.className = 'pulse';
  holder.appendChild( pulse );

  // append the marker to the map container
  chart.svgContainer.htmlElement.appendChild( holder );

  $(holder).tooltip({});

  return holder;
}
</script>

//主题开始
am4core.useTheme（am4themes_动画）；
//主题结束
//创建地图实例
var chart=am4core.create（“chartdiv”，am4maps.MapChart）；
//设置地图定义
chart.geodata=am4geodata\u worldLow；
//集合投影
chart.projection=新的am4maps.projections.Miller（）；
//创建地图多边形系列
var polygonSeries=chart.series.push（新的am4maps.mappygonseries（））；
//排除关节炎
polygoseries.exclude=[“AQ”]；
//使地图从GeoJSON加载多边形（如国家名称）数据
polygoseries.useGeodata=true；
//配置系列
var polygontamplate=polygonSeries.mapPolygons.template；
PolygContemplate.tooltipText=“{name}”；
polygontamplate.fill=am4core.color（“#f0”）；
//创建悬停状态并设置替代填充颜色
var hs=polygonTemplate.states.create（“悬停”）；
hs.properties.fill=am4core.color（“#cccc”）；
//变焦控制
chart.zoomControl=新的am4maps.zoomControl（）；
//添加图像系列
var imageSeries=chart.series.push（新的am4maps.MapImageSeries（））；
imageSeries.mapImages.template.propertyFields.longitude=“longitude”；
imageSeries.mapImages.template.propertyFields.latitude=“latitude”；
imageSeries.mapImages.template.propertyFields.url=“url”；
imageSeries.data=[{
...
//添加事件以在移动或缩放地图时重新计算地图位置
图表.events.on（“mappositionchanged”，updateCustomMarkers）；
//此函数将获取地图上的当前图像，并为它们创建HTML元素
函数updateCustomMarkers（事件）{
//浏览所有的图片
mapImages.each（函数（图像）{
//检查它是否有相应的HTML元素
如果（！image.dummyData | |！image.dummyData.externalElement）{
//创建onex
image.dummyData={
外部元素：createCustomMarker（图像）
};
}
//根据坐标重新定位图元
var xy=chart.geopointosvg（{经度：image.longitude，纬度：image.latitude}）；
image.dummyData.externalElement.style.top=xy.y+'px'；
image.dummyData.externalElement.style.left=xy.x+'px'；
});
}
//此函数用于创建并返回新的标记元素
函数createCustomMarker（图像）{
var chart=image.dataItem.component.chart；
//创建持有者
var holder=document.createElement（'div'）；
holder.className='map marker'；
holder.title=image.dataItem.dataContext.title；
holder.style.position='绝对'；
//也许可以添加一个链接到它？
if（未定义！=image.url）{
holder.onclick=函数（）{
window.location.href=image.url；
};
holder.className+=“地图可点击”；
}
//创建点
var dot=document.createElement（'div'）；
dot.className='dot'；
支架.附件（dot）；
//产生脉冲
var pulse=document.createElement（'div'）；
pulse.className='pulse'；
夹持器。附属器（脉冲）；
//将标记附加到地图容器
chart.svgContainer.htmlElement.appendChild（持有者）；
$（持有者）。工具提示（{}）；
报税表持有人；
}

我希望页面加载的圆圈显示出来，而不仅仅是地图。任何帮助都非常感谢

我可以放大，圆圈就会出现

这是一个重要的提示。同样，由于你的网站和CMS上有相同的问题，CMS不是问题所在

现在您只有：

chart.events.on（“mappositionchanged”，updateCustomMarkers）；

地图准备好后，您需要运行

updateCustomMarkers

，尽管您已经复制了，但您缺少以下关键行：

chart.events.on（“ready”，updateCustomMarkers）；

有了它，无论是在你的网站上还是在CMS上，它每次都应该工作