似乎无法让鼠标悬停事件与地图框一起工作
Cannot seem to get mouseover event to work with mapbox
我有一点麻烦弄清楚为什么mouseover
事件不与mapbox gl工作。
map.on('load', function() {
var geoJson = '{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
...
},
"geometry": {
"type": "Point",
"coordinates": [
-118.6059,
34.1829
]
}
}]
}';
map.addSource('someData', {
type: 'geojson',
data: geoJson,
cluster: true,
clusterMaxZoom: 14
});
map.addLayer({
'id': 'unclustered-markers',
'type': 'symbol',
'source': 'someData',
'layout': {
'icon-image': 'circle-11'
}
});
});
因此该部分工作并且坐标显示在集群内的地图上。然而,当我尝试mouseover
事件时,什么也没有发生。
map.on('mouseover',function(e) {
console.log(e); // nothing is logged when I hover over the map or the points
var features = map.queryRenderedFeatures(e.point, { layers: ['unclustered-markers'] });
...
});
如果我将该事件更改为click
,那么当我单击地图时,该事件将记录到控制台。
您似乎使用了错误的事件名称。注意,它是mousemove
,而不是mouseover
。要解决这个问题,请将代码更改为:
map.on('mousemove',function(e) {
console.log(e);
//....
});
下面是一个工作示例:https://jsfiddle.net/kmandov/o870ufLr/打开控制台查看事件
GL JS不触发mouseover
事件,尽管触发mousemove
和moseout
事件。我不认为我们有理由不解雇mouseover
。我们应该添加这个事件
还有mouseenter
,应该根据您的应用程序来考虑。如果你偶然发现这个问题,因为Mapbox给你不稳定的行为与丢失的弹出框,这里有一个工作,以保证弹出框将在feature
以上的用户悬停。
使用Mapbox处理事件并获取鼠标坐标,如下所示:
map.on('mouseenter', 'layerID', (event) => {
var x = event.originalEvent.clientX
var y = event.originalEvent.clientY
那么,这是一个问题,使用您最喜欢的DOM处理程序和添加<div>
的弹出。将弹出窗口的位置设置为用户悬停的位置,如下所示:
{left : `${x}`, top : `${y}`, position : 'absolute', zIndex : 1}
相关文章:
- 谷歌地图固定位置覆盖
- 如何将“厚实”(粗粒度)缩放级别与传单地图一起使用
- Javascript-更有效的“;地图”;两个阵列在一起
- 地图未与传单一起显示
- 如何将MapBox地图与Mapquest路线服务一起使用
- 地图不显示与谷歌地图 js API 一起
- 如何最好地将微数据与 SVG 一起包含在动态地图中
- 添加与谷歌地图信息窗口一起运行的事件侦听器
- 让谷歌地图与推特引导选项卡一起工作
- 在Openlayers 3中使标记与地图一起缩放/旋转
- 如何将源地图与gump一起使用
- 将地图位置信息从PHP传递到javascript,以便与Google地图v3api一起使用
- 可以't让地图与gmaps.js一起出现
- 谷歌地图 - 将其设置为与 Rails 5 一起使用 - 地理编码器不地理编码
- 似乎无法让鼠标悬停事件与地图框一起工作
- 谷歌地图,两条路线重叠在一起
- 谷歌地图 - 在javascript中将两个变量名称合并在一起
- 我无法让谷歌地图API与我的简单网页一起使用
- 地图盒不再与传单一起工作
- 谷歌地图API是如何与AngularJS一起工作的