mapbox/mapbox-gl-js

Marker needs more events such as "click"

Open

#7,793 创建于 2019年1月21日

在 GitHub 查看
 (28 评论) (19 反应) (0 负责人)JavaScript (2,203 fork)batch import
api :memo:feature :green_apple:good first issue

仓库指标

Star
 (10,532 star)
PR 合并指标
 (30 天内没有已合并 PR)

描述

Motivation

Marker has only three events "dragstart", "drag", "dragend". What if you want to get something from marker when it's cliked? You can use addEventListener on its element from getElement but the data from DOM Listener doesn't include what Marker object has. e.g. position of Marker, its draggability, etc.

So, it needs more event types including "click", "dblclick", "mouseenter", etc. Then we can get what we want when we need.

Design Alternatives

I'm not so sure about inner-logic how it implements for now. But I can guess, the whatever events are added into map's container. image

I tried to use preventDefault and stopPropagation but it does not work because it actually does not have a event on it.

  • Use case for needs of prevendDefault, stopPropagation thing
    1. There are two markers on map.
    2. Add event on each marker but second marker should not trigger map's event.

Mock-Up

The look should be like: marker.on(type, listener, stopPropagation); stopPropagation for prevent map's event.

Implementation

Following is the workaround:

// for map
map.on("click", function(e) {
  if (e.originalEvent.target !== marker.getElement()) {
    // it's map!
  }
});

// for marker
map.on("click", function(e) {
  if (e.originalEvent.target === marker.getElement()) {
    // it's marker!
  }
});

It seems good when we have only one marker, but if we have lots of markers, we can not use condition like:

if (e.originalEvent.target !== marker.getElement() &&
   e.originalEvent.target !== marker2.getElement() &&
  ... ) {

Sorry about mixing up with adding click event and needs of stopPropagation thing, I think it should be considered when the event things are implemented.

here is fiddle: https://jsfiddle.net/roqh9gjw/4/

贡献者指南