Google地图信息框点击进入另一个标记 [英] Google Maps Infobox click through to another marker

问题描述

我试图在信息框打开时停止触发事件。问题在于信息框正在渲染其他标记的顶部时，用户有能力点击信息框并单击其后的标记。有没有办法阻止这一点，同时仍然能够点击不在信息框后面的标记？

  dropInfoBox = new InfoBox（{
 content：document.getElementById（pinDrop），
 disableAutoPan ：false，
 pixelOffset：new google.maps.Size（-140，0），
 zIndex：null，
 boxStyle：{
 color：'white'，
背景：'＃101010'，
 width：90px
}，
 infoBoxClearance：new google.maps.Size（1，1）
}）; 
 dropInfoBox.open（map，marker）; 
 $（'。infoBox> img'）。css（'height'，''）; 
 $（'。infoBox'）。click（function（evt）{
 evt.stopPropagation（）; 
 
}）; 
  

解决方案

将enableEventPropagation设置为false。
$ b

enableEventPropagation |布尔|在
InfoBox中传播mousedown，mousemove，mouseover，mouseout，
mouseup，click，dblclick，touchstart，touchend，touchmove和contextmenu事件（默认为false以模仿google.maps.InfoWindow ）。

 <$ c $设置
这个属性为true，如果InfoBox被用作地图标签。 c> dropInfoBox = new InfoBox（{
 enableEventPropagation：false，
 content：document.getElementById（pinDrop），
 disableAutoPan：false，
 pixelOffset：new google.maps。大小（-140，0），
 zIndex：null，
 boxStyle：{
颜色：'white'，
背景：'＃101010'，
宽度： 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'，函数（marker，e）{return function（）{var myHTML = e.feature.getProperty（'name'）; boxText.innerHTML =< div style ='text-align：center; height：100px'><< ; b>+ myHTML +< / b>< br>这是一个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

/ div>

I am attempting to stop events from firing when an infoBox is opened. The issue is when the Infobox is rendering ontop of other markers, users have the ability to click through the InfoBox and click on the markers behind it. Is there a way to prevent this while still being able to click on a marker not behind the 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();

    });

解决方案

Set enableEventPropagation to false.

enableEventPropagation | boolean | Propagate mousedown, mousemove, mouseover, mouseout, mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label.

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);

code snippet:

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>

这篇关于Google地图信息框点击进入另一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！