Question

我正在尝试将jQuery UI滑块与Google地图infobubble.js一起使用，但似乎遇到了问题。当您单击并尝试在信息气泡窗口内拖动滑块时，它似乎不起作用。但是，如果单击滑块手柄，将鼠标光标移动到窗口外上下拖动，则可以正常工作。请参阅JSFiddle here。代码如下：

var mapCenter = new google.maps.LatLng(-35.397, 150.644);
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-35, 150),
    draggable: true
});
var bubble = new InfoBubble({
    maxWidth: 300,
});
bubble.addTab("", "<div id='slider' style='height: 100px;'></div>");

google.maps.event.addListener(marker, 'click', function () {
    google.maps.event.addListener(bubble, 'domready', function () {
        setTimeout(function () {
            $("#slider").slider({
                orientation: "vertical",
                range: "min",
                min: 0,
                max: 80,
                value: 60,
                slide: function (event, ui) {
                    $("#value").html(ui.value);
                }
            });
        }, 200);
    });
    bubble.open(map, marker);
});

我不确定如何调试此问题。它是否与点击事件有关？

Answer 1

好的，解决了 - 请注意。

tl; dr：您将无法在InfoBubble中选择内容，但jQuery滑块可以正常工作。

Here's a working fiddle。

mousemove＆amp; infobubble.js正在取消touchmove事件冒泡。你需要泡泡才能让jQuery UI挂钩..所以..你必须编辑infobubble.js代码。

这是怎么回事！

抓取infobubble.js的副本，然后将其作为本地副本放入您的页面。

然后，注释掉以下几行：

InfoBubble.prototype.addEvents_ = function() {
  // We want to cancel all the events so they do not go to the map
  var events = ['mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup',
      'mousewheel', 'DOMMouseScroll', 'touchstart', 'touchend', 'touchmove',
      'dblclick', 'contextmenu', 'click'];

  var bubble = this.bubble_;
  this.listeners_ = [];
  for (var i = 0, event; event = events[i]; i++) {
    this.listeners_.push(
      google.maps.event.addDomListener(bubble, event, function(e) {

      /*
       * The bubble that's being cancelled is causing your issues.
         I've commenting this out, but you can remove specific events from the array above.

        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }

       */

      })
    );
  }
};

希望这有帮助。

jQuery UI滑块与Google Maps InfoBubble.js无法正常工作

1 个答案:

这是怎么回事！