Question

我试图在打开infoBox时停止触发事件。问题是，当Infobox渲染其他标记时，用户可以单击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();

    });

Answer 1

将enableEventPropagation设置为false。

enableEventPropagation |布尔值|传播mousedown，mousemove，mouseover，mouseout， mouseup，click，dblclick，touchstart，touchend，touchmove和contextmenu事件 InfoBox（默认为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>

Answer 2

在创建标记时简单地添加optimized：false参数并解决问题！

Google Maps Infobox点击进入另一个标记

2 个答案: