Question

我正在使用此自定义窗口进行气球提示 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/

这是我到目前为止的代码

var map;
            var ibs = [];   
            function loadMap() {
                var latlng = new google.maps.LatLng(47.2175, 2.0614);    // center of europe
                var mapOptions = {
                    zoom: 2,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scrollwheel: false
                };
                map = new google.maps.Map(document.getElementById("map"), mapOptions);

                var typeToIcons = {
                    "STORE": "garnish/store-pin.png",
                    "HOTEL": "garnish/hotel-pin.png"
                }


                placeMarker(new google.maps.LatLng(38.101063330, 23.810806274), "<span class=\"logo\"\></span\> <h3\>Kifissia</h3\> <div class=\"details\"\> <p\><strong\>Address: </strong\>Foo 13, Athens, Bar, Ελλάδα (Αττική) Foo 13, Athens, Bar, Ελλάδα (Αττική) Foo 13, Athens, Bar, Ελλάδα (Αττική) Foo 13, Athens, Bar, Ελλάδα (Αττική)</p\> <p\><strong\>Telephone: </strong\>23654632543</p\> <p\><strong\>Fax: </strong\>27634734672</p\> <p\><strong\>Email: </strong\> <a href=\'mailto:gasds@ss.cc\' title=\'gasds@ss.cc\'\>gasds@ss.cc</a\> </p\> </div\> <a href=\"http://localhost:8080/cocomat/location-item?id=1\" class=\"pop requiresJs\" title=\"Read more\"\>Read more</a\>", typeToIcons.STORE);

                placeMarker(new google.maps.LatLng(38.620449844, 21.410079002), "<span class=\"logo\"\></span\> <h3\>Αgrinio</h3\> <div class=\"details\"\> <p\><strong\>Address: </strong\>Lam 56, Bla, TYY, Ελλάδα (Ηπειρωτική)</p\> <p\><strong\>Telephone: </strong\>783487328</p\> <p\><strong\>Fax: </strong\>7423893278</p\> <p\><strong\>Email: </strong\> <a href=\'mailto:jhjhdf@fuf.cc\' title=\'jhjhdf@fuf.cc\'\>jhjhdf@fuf.cc</a\> </p\> </div\> <a href=\"http://localhost:8080/cocomat/location-item?id=2\" class=\"pop requiresJs\" title=\"Read more\"\>Read more</a\>", typeToIcons.STORE);

                geocode("International");

            }

            function placeMarker(position, content, markerIcon) {

                var marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    icon: markerIcon
                });



                google.maps.event.addListener(marker, 'click', function() {



                    for(var i in ibs) {
                        ibs[i].close();
                    }

                    var ib = new InfoBubble({
                    content:content,
                    backgroundColor:"#F4F4F4",
                    borderRadius:0,
                    backgroundClassName:"infoBox bubble",
                    disableAnimation:true,
                    minHeight:250,
                    maxWidth:232,
                    arrowSize:15,
                    arrowPosition:25});



                ibs.push(ib);

                    if (!ib.isOpen()) {

                        ib.open(map, marker);
                    }

                });
            }

            // fit map bounds to selected country
            function geocode(country) {
                new google.maps.Geocoder().geocode({'address': country}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        // first result is the most specific
                        map.fitBounds(results[0].geometry.viewport);
                    }
                });
            }

            $(function(){
                loadMap();

                $('body').delegate('.pop','click',function(){
                    window.open($(this).attr('href'), "locationItem", "scrollbars=1, toolbar=0, status=0, menubar=0, width=800, height=500");
                    return false;
                });



            });

问题是delegate（）函数不起作用。我也试过live（）

Answer 1

我遇到了同样的问题，here's a solution有效：

$(infoBubble.bubble_).live("click", function() {
    console.log('clicked!');
});

Answer 2

您可以使用google apis dom events

附加DOM事件

google.maps.event.addDomListener(document.getElementById("infobubble_id", 'click', myFunctionThatOpensAWindow);

更多信息：

http://code.google.com/apis/maps/documentation/javascript/events.html#DomEvents

Answer 3

你至少可以通过修改库来解决这个问题...我不确定是否有更好的方法来进行委托和实时工作，但这似乎可以正常工作。

如果您在InfoBubble库中查找这段代码，您可以看到它处理事件冒泡的位置：

/**
 * Add events to stop propagation
 * @private
 */
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) {
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
      })
    );
  }
};

如果从events数组中删除“click”，则单击委派将按预期工作。就像我说的那样，可能有更好的方法。

Answer 4

我试图将事件绑定到我添加到气泡内容的锚点。我遇到的问题是在函数中我无法在DOM中搜索元素。我不得不搜索infobubble。

我设置的方式 - 我单击一个标记，它会调用一个更新信息气泡内容的函数。更新内容后，将打开infoBubble。信息气泡的内容位于“infoBubble.j”中。我检查了infoBubble.j里面的关闭按钮的类（或ID），一旦我找到它，我就添加了click功能。

请参阅下文，了解我如何将其设置为上下文并添加了点击功能。

$('.bubble-wrap-close', infoBubble.j).click(function(){
    infoBubble.close();
});

显然，“bubble-wrap-close”是我给我的关闭按钮的类，而不是infoBubble中关闭按钮的本地类。

我认为您不必打开infoBubble来查找其内容中的锚点或其他元素。只需在infoBubble.j的上下文中搜索您的类，并将您的函数绑定到它，就像我上面所做的那样。

希望您能够使用此方法附加您的委托功能。

祝你好运

Google map infobubble link click delegate（）或live（）不起作用

4 个答案: