鼠标事件从标记传播到底层地图 [英] Mouse events propagation from marker to underlying map

问题描述

我有一个问题，
为什么与地图相关的剂量鼠标事件在我们结束标记时不会触发

exp。将鼠标移动侦听器添加到地图时，当我们移动到标记
（不存在所谓的事件传播或冒泡）时，从不会调用它。

它是一个错误，或者它在v3中改变了这种行为？

Blaze

以下是示例...

如果您在地图上移动，则会更新mapLabel应该是
，但是如果你移动标记，mapLabel永远不会被更新

  var map; 
函数initialize（）{
 var myLatlng = new google.maps.LatLng（-25.363882,131.044922）; 
 var myOptions = {
 zoom：4，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google .maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 google.maps.event.addListener（map，'MOUSEMOVE'，function（）{
 document.getElementByID（'moveLabel'）。innerHtml ='鼠标地图移动'+ Math.random （）; 
}）; 
 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：Hello World！
 }）; 
 google.maps.event.addListener（marker，'MOUSEOUT'，function（）{
 document.getElementByID（'markerLabel'）。innerHtml =''; 
}）; 
 google.maps.event.addListener（marker，'MOUSEOVER'，function（）{
 document.getElementByID（'markerLabel'）。innerHtml ='Mouse over marker'; 
}）; 
 
  

解决方案

绘制放置在7层。这些图层称为窗格。根据图纸属于哪个窗格，它可以接收或不接收事件。有关详情，请参阅 google.maps.MapPanes 文档。

更新： Google maps会绘制7个窗格上的所有数据。所有窗格都是同一父项的子项。对于事件冒泡，元素之间的关系应该是 parent-child （然后child可以将事件冒泡到父级），但不是 sibling-同级。在 sibling-sibling 关系中，事件由具有最高 z-index 的元素接收。这就是您不会从标记窗格中将事件冒泡到地图窗格的原因。

I have one question, why dose mouse events related to a map never fire when we are over marker

exp. having a mouse move listener added to a map is never called when we move over a marker (there is not so called event propagation or bubbling).

This was actully working on maps v2!

Is it a bug, or its changed to this behavior in v3?

Blaze

Here is the example...

If you move around the map, the mapLabel is updated as should be but if u move over the marker the mapLabel is never updated

var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'MOUSEMOVE', function() {
    document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random();
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });
google.maps.event.addListener(marker, 'MOUSEOUT', function() {
    document.getElementByID('markerLabel').innerHtml = '';
  });
  google.maps.event.addListener(marker, 'MOUSEOVER', function() {
    document.getElementByID('markerLabel').innerHtml = 'Mouse over marker';
  });
}

解决方案

All google maps' data that is drawn placed on 7 layers. These layers are called Panes. According to what pane the drawing belongs , it can receive or not receive events. For more information look at the google.maps.MapPanes documentation.

UPDATE: Google maps draws all data on 7 panes. All panes are children of the same parent. For event bubbling it is neccessary that the relation of elements should be parent-child ( then child can bubble the event to parent ),but not sibling-sibling. In sibling-sibling relation, event is received by element with the highest z-index. This is the reason you don't get events bubbled from marker's pane to map's pane.

这篇关于鼠标事件从标记传播到底层地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！