amChart 地图 |识别移动设备上的点击行为

如何解决amChart 地图 |识别移动设备上的点击行为

当您将鼠标悬停在下方地图上的普罗旺斯时，您会看到普罗旺斯的名称。如何在移动设备上使用 amCharts 模仿这种行为？如果您点击一次时标签出现在移动设备上，那就太好了。同一时间只能看到一个标签。

我一直在无休止地寻找答案。我也无法在文档中找到答案，例如在 https://www.amcharts.com/docs/v4/concepts/touch/

最终，当您再次点击同一个省份时，我希望能够链接到另一个页面。因此，如果您选择一个普罗旺斯，并且在该普罗旺斯中可以看到标签，那么您将转到另一个页面。左边最大的产地（新疆）已经链接到google.com。但我什至不知道如何监听第一个点击事件。

有人知道如何解决这个问题吗？

var chart = am4core.create("mapchina",am4maps.MapChart);
chart.geodata = am4geodata_chinaHigh;
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;
chart.chartContainer.wheelable = false;

var polygonSeries = chart.series.push(new am4maps.MappolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.calculateVisualCenter = true;
polygonSeries.tooltip.getFillFromObject = false;
polygonSeries.tooltip.background.fill = am4core.color("#30302F");
polygonSeries.tooltip.background.stroke = am4core.color("#30302F");
polygonSeries.tooltip.fontSize = 14;
polygonSeries.tooltip.fontFamily = "Open sans";
polygonSeries.data = [
    {
        id: "CN-XJ",name: "Xinjiang",url: "www.google.com",urlTarget: "_blank"
    },{
        id: "CN-NM",name: "Neimenggu"
    },{
        id: "CN-GX",name: "Guangxi"
    },{
        id: "CN-NX",name: "Ningxia"
    }
];

var polygonTemplate = polygonSeries.mappolygons.template;
polygonTemplate.fill = am4core.color("#F26964");
polygonTemplate.stroke = am4core.color("#fff");
polygonTemplate.strokeWidth = 1;
polygonTemplate.hoverOnFocus = true;
polygonTemplate.nonScalingstroke = true;
polygonTemplate.tooltipText = "[text-transform: uppercase; font-weight: 600; font-size: 14px]{name}";
polygonTemplate.propertyFields.url = "url";
polygonTemplate.propertyFields.urlTarget = "urlTarget";

polygonTemplate.events.on("over",function(event) {
    event.target.zIndex = Number.MAX_VALUE;
    event.target.toFront();
});

var hoverState = polygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#FFD464");
hoverState.properties.stroke = am4core.color("#FFD464");
hoverState.properties.strokeWidth = 1;

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

#mapchina {
  width: 100%;
  height: 350px;
}

<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/chinaHigh.js"></script>

<div id="mapchina"></div>

解决方法

可以通过将 event.target.isHover 设置为 true/false 来切换每个省的悬停状态（当 polygonTemplate.hoverOnFocus 设置为 false 时效果最佳） .每次点击都会触发 over 事件，因此可以在那里启用悬停状态（保持这种状态直到用户再次交互）。选中 event.touch 允许非触摸屏上的鼠标事件行为不受影响。

棘手的部分是相应的 out 事件似乎不会触发触摸事件。没有这个，就很难知道一个水龙头是给定省份的第一个还是第二个水龙头。要解决此问题，可以改用 document.ontouchend 事件。在这个函数中，检查 target 是否是最后一个点击的省份，这样它就可以作为一个 out 事件（这样更好，因为它甚至会在图表外的点击时触发） .

通过跟踪最后点击的省份 (tapProvince)，可以在随后的 over 事件中进行比较，以检查初始点击或重复点击。最后，通过将 event.target.url 设置为空字符串或预期的 URL，可以控制导航。

var chart = am4core.create("mapchina",am4maps.MapChart);
chart.geodata = am4geodata_chinaHigh;
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;
chart.chartContainer.wheelable = false;

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.calculateVisualCenter = true;
polygonSeries.tooltip.getFillFromObject = false;
polygonSeries.tooltip.background.fill = am4core.color("#30302F");
polygonSeries.tooltip.background.stroke = am4core.color("#30302F");
polygonSeries.tooltip.fontSize = 14;
polygonSeries.tooltip.fontFamily = "Open sans";
polygonSeries.data = [{
    id: "CN-XJ",name: "Xinjiang",url: "www.google.com",urlTarget: "_blank"
  },{
    id: "CN-NM",name: "Neimenggu"
  },{
    id: "CN-GX",name: "Guangxi"
  },{
    id: "CN-NX",name: "Ningxia"
  }
];

var tapProvince;
var tapURL;

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#F26964");
polygonTemplate.stroke = am4core.color("#fff");
polygonTemplate.strokeWidth = 1;
polygonTemplate.hoverOnFocus = false;
polygonTemplate.nonScalingStroke = true;
polygonTemplate.tooltipText = "[text-transform: uppercase; font-weight: 600; font-size: 14px]{name}";
polygonTemplate.propertyFields.url = "url";
polygonTemplate.propertyFields.urlTarget = "urlTarget";

polygonSeries.calculateVisualCenter = true;
polygonTemplate.tooltipPosition = "fixed";

document.ontouchend = function(event) {
  if (tapProvince && !tapProvince.dom.contains(event.target)) {
    tapProvince.isHover = false;
    tapProvince.url = tapURL;
    tapProvince = undefined;
  };
};

polygonTemplate.events.on("over",function(event) {
  event.target.zIndex = Number.MAX_VALUE;
  event.target.toFront();

  if (event.touch) {
    event.target.isHover = true;

    if (tapProvince && tapProvince.dom === event.target.dom) {
      //after first tap
      event.target.url = tapURL;
    } else {
      //first tap
      tapProvince = event.target;
      tapURL = event.target.url;
      event.target.url = "";
    };
  };
});

var hoverState = polygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#FFD464");
hoverState.properties.stroke = am4core.color("#FFD464");
hoverState.properties.strokeWidth = 1;

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

#mapchina {
  width: 100%;
  height: 350px;
}

<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/chinaHigh.js"></script>

<div id="mapchina"></div>