Javascript 检查数组是否为空,如果为';这是真的
我有一张3个国家的地图,点击后,会显示一个带有链接和名称的弹出窗口。 我想避免没有链接显示的国家弹出窗口 如何检查空数组并防止仅针对Javascript 检查数组是否为空,如果为';这是真的,javascript,arrays,object,Javascript,Arrays,Object,我有一张3个国家的地图,点击后,会显示一个带有链接和名称的弹出窗口。 我想避免没有链接显示的国家弹出窗口 如何检查空数组并防止仅针对“link”或“linkName”中没有任何信息的国家/地区弹出窗口 弹出窗口出现在以下位置: let polygonTemplate = series.mapPolygons.template; polygonTemplate.tooltipHTML = '<b>{country}</b>'; polygonTemplate
“link”
或“linkName”
中没有任何信息的国家/地区弹出窗口
弹出窗口出现在以下位置:
let polygonTemplate = series.mapPolygons.template;
polygonTemplate.tooltipHTML = '<b>{country}</b>';
polygonTemplate.events.on("hit", function (ev) {
chart.closeAllPopups();
// Map countries and link encoding
const popupContent = `
<strong>${ev.target.dataItem.dataContext.country}</strong><br />
${ev.target.dataItem.dataContext.link.map((url,urlIndex)=>`
<a href="${encodeURI(url)}">${ev.target.dataItem.dataContext.linkName[urlIndex]}</a><br>
`).join('')}
`;
chart.openPopup(popupContent);
});
am4core.ready(函数(){
//主题开始
am4core.useTheme(am4themes_动画);
//主题结束
//创建地图实例
让chart=am4core.create(“map”,am4maps.MapChart);
//响应能力启用
chart.responsive.enabled=true;
//设置地图定义
chart.geodata=am4geodata_worldHigh;
//集合投影
chart.projection=新的am4maps.projections.Miller();
//变焦控制
chart.zoomControl=新的am4maps.zoomControl();
让homeButton=new am4core.Button();
homeButton.events.on(“点击”,函数(){
chart.goHome();
});
homeButton.icon=new am4core.Sprite();
homeButton.填充(7,5,7,5);
homeButton.width=30;
homeButton.icon.path=“M16,8 L14,8 L14,16 L10,16 L6,10 L6,16 L2,16 L2,8 L8,0 L16,8 Z M16,8”;
homeButton.marginBottom=10;
homeButton.parent=chart.zoomControl;
homeButton.insertBefore(图表、zoomControl.plusButton);
//默认情况下,以组为中心
chart.homeZoomLevel=3.5;
chart.homeGeoPoint={
经度:10,
纬度:54
};
设groupData=[{
“颜色”:chart.colors.getIndex(0),
“数据”:[{
“国家”:“德国”,
“id”:“DE”,
“链接”:[“https://www.example1.com"],
“链接名称”:[“名称1”]
}, {
“国家”:“法国”,
“id”:“FR”,
“链接”:[“https://www.example2.com", "https://www.example3.com"],
“linkName”:[“名称2”,“名称3”]
}, {
“国家”:“比利时”,
“id”:“BE”,
“链接”:[“”],
“链接名”:[“”]
}]
}];
//此数组将填充要从世界大赛中排除的国家/地区ID
让excludedCountries=[“AQ”];
//为每个组创建一个系列,并填充上面的数组
groupData.forEach(函数(组){
let series=chart.series.push(新的am4maps.MapPolygonSeries());
series.name=group.name;
series.useGeodata=true;
让包容性国家=[];
group.data.forEach(功能(国家/地区){
includedCountries.push(country.id);
排除country.push(country.id);
});
让polygontTemplate=series.mapPolygons.template;
polygontamplate.tooltipHTML='{country}';
PolygContemplate.events.on(“命中”,函数(ev){
chart.closeAllPopups();
//地图国家和链接编码
常量popupContent=`
${ev.target.dataItem.dataContext.country}
${ev.target.dataItem.dataContext.link.map((url,urlIndex)=>`
`).join(“”)}
`;
图表.openPopup(popupContent);
});
series.include=包含的国家/地区;
series.fill=am4core.color(group.color);
series.setStateOnChildren=true;
series.calculateVisualCenter=true;
series.tooltip.label.interactionEnabled=false;//禁用工具提示单击
series.tooltip.keepTargetHover=true;
//国家形态属性与行为
让MapPolygontTemplate=series.mapPolygons.template;
MapPolyGatemplate.fill=am4core.color(“#c4a5e8”);
mapPolygonTemplate.fillOpacity=0.8;
mapPolygonTemplate.nonScalingStroke=true;
MapPolygContemplate.tooltipPosition=“固定”;
MapPolyGatemplate.events.on(“结束”,函数(事件){
series.mapPolygons.each(函数(mapPolygon){
mapPolygon.isHover=false;
})
event.target.isHover=false;
event.target.isHover=true;
})
MapPolyGatemplate.events.on(“out”,函数(事件){
series.mapPolygons.each(函数(mapPolygon){
mapPolygon.isHover=false;
})
})
//州
让hoverState=mappygontemplate.states.create(“悬停”);
hoverState.properties.fill=am4core.color(“#FFCC00”);
series.data=JSON.parse(JSON.stringify(group.data));
});
//世界其他地区。
让worldSeries=chart.series.push(新的am4maps.MapPolygonSeries());
让worldSeriesName=“世界”;
worldSeries.name=worldSeriesName;
worldSeries.useGeodata=真;
worldSeries.exclude=排除的国家;
worldSeries.fillOpacity=0.5;
worldSeries.hiddenInLegend=true;
worldSeries.mapPolygons.template.nonScalingStroke=true;
});代码>
正文{
字体系列:-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”;
}
#地图{
宽度:100%;
高度:600px;
溢出:隐藏;
}
#地图a,
b{
光标:指针;
颜色:#003399;
文本对齐:居中;
}
#地图a:悬停{
颜色:#023432;
}
.AMPOUP含量{
/*宽度:40%*/
文本对齐:居中;
}
.ampoup头{
背景色:#003399!重要;
}
.ampopup关闭{
过滤器:反转(1);
}
.ampopup内{
背景色:rgb(255、255、255);
}
.a.a.a.a.P{
颜色:#28a86c!重要;
}
.a内的安培数:悬停{
颜色:#023432!重要;
}
.安波普窗帘{
显示:块!重要;
背景色:rgba(7,22,51,0.7)!重要;
}
有链接的国家
您需要更改这些行:
const popupContent = `
<strong>${ev.target.dataItem.dataContext.country}</strong><br />
${ev.target.dataItem.dataContext.link.map((url,urlIndex)=>`
<a href="${encodeURI(url)}">${ev.target.dataItem.dataContext.linkName[urlIndex]}</a><br>
`).join('')}
`;
添加一条if语句,看看该属性是否存在??非常感谢您的解决方案!我尝试了一些比你更复杂的方法,但在Array.isArray()
const popupContent = `
<strong>${ev.target.dataItem.dataContext.country}</strong><br />
${ev.target.dataItem.dataContext.link.map((url,urlIndex)=>`
<a href="${encodeURI(url)}">${ev.target.dataItem.dataContext.linkName[urlIndex]}</a><br>
`).join('')}
`;
popupContent = ev.target.dataItem.dataContext.link.map((url,urlIndex)=>
`${(url.length) ? `<a href="${encodeURI(url)}">${ev.target.dataItem.dataContext.linkName[urlIndex]}</a><br>` : ''} `
).join('');
if (popupContent.trim().length != 0) { // if popup contains something....
popupContent = `<strong >${ev.target.dataItem.dataContext.country} </strong><br />`+ popupContent;
chart.openPopup(popupContent);
}