1

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

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

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

4

1 回答 1

0

好的，解决了它 - 有一个警告。

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

mousemove&事件touchmove冒泡正在被 infobubble.js 取消。你需要让 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();
        }

       */

      })
    );
  }
};
于 2013-11-01T08:50:31.683 回答