0

我试图在打开 infoBox 时阻止事件触发。问题是当信息框呈现在其他标记之上时，用户可以单击信息框并单击其后面的标记。有没有办法在仍然能够点击不在信息框后面的标记时防止这种情况发生？

  dropInfoBox = new InfoBox({
        content: document.getElementById("pinDrop"),
        disableAutoPan: false,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            color: 'white',
            background: '#101010',
            width: "90px"
        },
        infoBoxClearance: new google.maps.Size(1, 1)
    });
    dropInfoBox.open(map, marker);
    $('.infoBox > img').css('height', '');
    $('.infoBox').click(function (evt) {
    evt.stopPropagation();

    });
4

2 回答 2

1

将 enableEventPropagation 设置为 false。

启用事件传播 | 布尔值 | 在 InfoBox 中传播 mousedown、mousemove、mouseover、mouseout、mouseup、click、dblclick、touchstart、touchend、touchmove 和 contextmenu 事件（默认为 false 以模仿 google.maps.InfoWindow 的行为）。如果 InfoBox 被用作地图标签，则将此属性设置为 true。

dropInfoBox = new InfoBox({
    enableEventPropagation: false,
    content: document.getElementById("pinDrop"),
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
        color: 'white',
        background: '#101010',
        width: "90px"
    },
    infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);

代码片段：

var map = null;
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.901458523676155,
      8.381676499999912),
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'Point') {
      var marker = new google.maps.Marker({
        position: e.feature.getGeometry().get(),
        title: e.feature.getProperty('name'),
        map: map
      });
      google.maps.event.addListener(marker, 'click', function(marker, e) {
        return function() {

          var myHTML = e.feature.getProperty('name');
          boxText.innerHTML = "<div style='text-align: center;height: 100px'><b>" + myHTML + "</b><br>This is an InfoBox</div>";
          infobox.setPosition(e.feature.getGeometry().get());
          infobox.setOptions({
            pixelOffset: new google.maps.Size(-140, -20)
          });
          infobox.open(map);
        };
      }(marker, e));
      if (e.feature.getProperty('name') == "Guetersloh") {
        clickMarker(marker);
      }
    }
  });
  layer = map.data.addGeoJson(geoJson);
  map.data.setMap(null);
  google.maps.event.addListener(map, "click", function() {
    infobox.close();
  });
}

function clickMarker(marker) {
  setTimeout(function() {
    google.maps.event.trigger(marker, 'click');
  }, 1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
html,
body,
#map {
  width: 100%;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>

于 2014-05-08T14:42:45.423 回答
-2

只需在创建标记时添加优化：假参数即可解决问题！

于 2016-05-17T20:25:46.223 回答