在Mapbox GL JS工具提示中隐藏文本为空,可以通过以下步骤实现:
mapboxgl.Popup
类来定义工具提示的样式和内容。以下是一个示例代码:
// 创建地图实例
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
// 创建工具提示
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// 设置工具提示内容
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point);
var tooltipText = '';
// 根据需要设置工具提示文本
if (features.length > 0) {
tooltipText = features[0].properties.name;
}
// 判断文本是否为空,如果为空则不显示工具提示
if (tooltipText !== '') {
popup.setLngLat(e.lngLat)
.setHTML('<h3>' + tooltipText + '</h3>')
.addTo(map);
} else {
popup.remove();
}
});
在上述示例中,我们通过map.on('mousemove', ...)
事件监听鼠标移动事件,当鼠标移动到地图上时,查询渲染的要素并获取相应的属性值作为工具提示文本。然后,我们使用popup.setHTML(...)
方法将文本设置为工具提示的内容,并使用popup.addTo(map)
方法将工具提示添加到地图上。如果文本为空,则使用popup.remove()
方法隐藏工具提示。
这样,当鼠标移动到有要素的区域时,工具提示将显示相应的文本;当鼠标移动到没有要素的区域时,工具提示将隐藏。
领取专属 10元无门槛券
手把手带您无忧上云