Javascript 阿姆查特地图|识别手机上的点击行为

Javascript 阿姆查特地图|识别手机上的点击行为,javascript,amcharts,Javascript,Amcharts,当你将鼠标悬停在下面地图上的普罗旺斯时,你会看到普罗旺斯的名字。如何在手机上用amCharts模拟这种行为?当你点击一次时,如果标签出现在手机上就好了。同一时间只能看到一个标签 我一直在寻找答案。我在文档中也找不到答案,例如在 最后,当你再次点击同一个省份时,我希望能够链接到另一个页面。所以,如果你在一个普罗旺斯打上标签,如果一个标签在该普罗旺斯是可见的,那么你将转到另一个页面。左边最大的普罗旺斯(新疆)已经链接到google.com。但我甚至都不知道如何聆听第一次敲击音乐 有没有人,也许是有点

当你将鼠标悬停在下面地图上的普罗旺斯时,你会看到普罗旺斯的名字。如何在手机上用amCharts模拟这种行为?当你点击一次时,如果标签出现在手机上就好了。同一时间只能看到一个标签

我一直在寻找答案。我在文档中也找不到答案,例如在

最后,当你再次点击同一个省份时,我希望能够链接到另一个页面。所以,如果你在一个普罗旺斯打上标签,如果一个标签在该普罗旺斯是可见的,那么你将转到另一个页面。左边最大的普罗旺斯(新疆)已经链接到google.com。但我甚至都不知道如何聆听第一次敲击音乐

有没有人,也许是有点经验的人,对如何解决这个问题有想法

var chart=am4core.create(“mapchina”,am4maps.MapChart);
chart.geodata=am4geodata\u chinaHigh;
chart.seriesContainer.draggable=false;
chart.seriesContainer.resizeable=false;
chart.maxZoomLevel=1;
chart.chartContainer.wheelable=false;
var polygonSeries=chart.series.push(新的am4maps.mappygonseries());
polygoseries.useGeodata=true;
polygoseries.calculateVisualCenter=true;
polygonSeries.tooltip.getFillFromObject=false;
polygoseries.tooltip.background.fill=am4core.color(“#30302F”);
polygonSeries.tooltip.background.stroke=am4core.color(“#30302F”);
polygonSeries.tooltip.fontSize=14;
polygoseries.tooltip.fontfamine=“打开SAN”;
polygonSeries.data=[
{
id:“CN-XJ”,
名称:“新疆”,
网址:“www.google.com”,
urlTarget:“\u blank”
},
{
id:“CN-NM”,
名称:“内蒙古”
},
{
id:“CN-GX”,
名称:“广西”
},
{
id:“CN-NX”,
名称:“宁夏”
}
];
var polygontamplate=polygonSeries.mapPolygons.template;
polygontamplate.fill=am4core.color(“#F26964”);
polygontamplate.stroke=am4core.color(“#fff”);
polygonTemplate.strokeWidth=1;
polygonTemplate.hoverOnFocus=true;
polygonTemplate.nonScalingStroke=true;
PolygContemplate.tooltipText=“[text transform:大写;字体重量:600;字体大小:14px]{name}”;
polygonTemplate.propertyFields.url=“url”;
polygContemplate.propertyFields.urlTarget=“urlTarget”;
polygonTemplate.events.on(“结束”,函数(事件){
event.target.zIndex=Number.MAX_值;
event.target.toFront();
});
var hoverState=polygonTemplate.states.create(“悬停”);
hoverState.properties.fill=am4core.color(“#FFD464”);
hoverState.properties.stroke=am4core.color(“#FFD464”);
hoverState.properties.strokeWidth=1
正文{
字体系列:-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”;
}
#马普钦{
宽度:100%;
高度:350px;
}

通过将
event.target.isHover
设置为
true
/
false
(将
PolyContemplate.hoverOnFocus
设置为
false
,可以切换每个省份的悬停状态)。每次点击都会触发
over
事件,因此可以在那里启用悬停状态(保持这种状态,直到用户再次交互)。选中
event.touch
可使鼠标事件在非触摸屏上的行为不受影响

棘手的是,相应的
out
事件似乎不会触发触摸事件。如果没有这一点,就很难知道某个水龙头是某个省份的第一个水龙头还是第二个水龙头。为了解决这个问题,可以使用
document.ontouchend
事件。在该功能中,检查
目标
是否是最后一次点击的省份,以便它可以作为
输出
事件(这更好,因为它甚至会触发图表外的点击)

通过跟踪上一个抽头省份(
tapprovance
),可以在后续的
over
事件中进行比较,以检查初始抽头或重复抽头。最后,通过将
event.target.url
设置为空字符串或预期的url,可以控制导航

var chart=am4core.create(“mapchina”,am4maps.MapChart);
chart.geodata=am4geodata\u chinaHigh;
chart.seriesContainer.draggable=false;
chart.seriesContainer.resizeable=false;
chart.maxZoomLevel=1;
chart.chartContainer.wheelable=false;
var polygonSeries=chart.series.push(新的am4maps.mappygonseries());
polygoseries.useGeodata=true;
polygoseries.calculateVisualCenter=true;
polygonSeries.tooltip.getFillFromObject=false;
polygoseries.tooltip.background.fill=am4core.color(“#30302F”);
polygonSeries.tooltip.background.stroke=am4core.color(“#30302F”);
polygonSeries.tooltip.fontSize=14;
polygoseries.tooltip.fontfamine=“打开SAN”;
polygonSeries.data=[{
id:“CN-XJ”,
名称:“新疆”,
网址:“www.google.com”,
urlTarget:“\u blank”
},
{
id:“CN-NM”,
名称:“内蒙古”
},
{
id:“CN-GX”,
名称:“广西”
},
{
id:“CN-NX”,
名称:“宁夏”
}
];
无功补偿;
var-tapURL;
var polygontamplate=polygonSeries.mapPolygons.template;
polygontamplate.fill=am4core.color(“#F26964”);
polygontamplate.stroke=am4core.color(“#fff”);
polygonTemplate.strokeWidth=1;
polygonTemplate.hoverOnFocus=false;
polygonTemplate.nonScalingStroke=true;
PolygContemplate.tooltipText=“[text transform:大写;字体重量:600;字体大小:14px]{name}”;
polygonTemplate.propertyFields.url=“url”;
polygContemplate.propertyFields.urlTarget=“urlTarget”;
polygoseries.calculateVisualCenter=true;
polygoontemplate.tooltipPosition=“固定”;
document.ontouchend=函数(事件){
if(tapProvince&&!tapProvince.dom.contains(event.target)){
tapprovance.isHover=false;
tapprovance.url=tapURL;
TAPPROVICE=未定义;
};
};
polygonTemplate.events.on(“结束”,函数(事件)