Question

我在“材质对话框”组件中有一张世界地图，并且悬停时的工具提示未显示在正确的位置。似乎显示工具提示的HTML元素没有正确的translateX，translateY值。

<g role="tooltip" transform="translate(52.842,46.235)">

如果我放大/缩小浏览器，则将正确计算值，并在正确的位置显示工具提示。我的理论是地图在材质对话框完成初始化之前初始化。为此，我尝试预订对话框的afterOpened事件以随后初始化地图。是的，没错，工具提示会显示在正确的位置。但是这次，在打开动画的对话框和地图的初始化之间，我得到了很大的延迟。

我在下面分享了我的地图代码。我想问问解决这个问题的更好方法是什么。预先感谢。

  private initMap(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.zone.runOutsideAngular(() => {
        const chart = am4core.create('chartdiv', am4maps.MapChart);
        chart.projection = new am4maps.projections.Miller();

        chart.geodata = worldLow;

        this.initDisabledCountriesSerie(chart);

        this.initEnabledCountriesSerie(chart);

        this.chart = chart;
      });
    }
  }

  private initDisabledCountriesSerie(chart) {
    const worldSeriesGrayArea = chart.series.push(new am4maps.MapPolygonSeries());
    worldSeriesGrayArea.useGeodata = true;
    worldSeriesGrayArea.mapPolygons.template.strokeWidth = 0.35;
  }

  private initEnabledCountriesSerie(chart) {
    const worldSeriesEnabled = chart.series.push(new am4maps.MapPolygonSeries());

    worldSeriesEnabled.data = this.countries;
    worldSeriesEnabled.include = this.countries.map(country => country.id);
    worldSeriesEnabled.useGeodata = true;
    const polygonTemplate = worldSeriesEnabled.mapPolygons.template;
    polygonTemplate.tooltipText = '{title}';
    polygonTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
  }

Amcharts4地图工具提示位置问题

0 个答案: