События кликов Google Maps API v3 не передаются пользовательскими наложениями

Я использую InfoBox для создания пользовательских оверлеев на моей карте GoogleMap. Короче говоря, я загружаю из XML lat longs и т. д., рисую булавки на карте и показываю пользовательское информационное окно. Все хорошо, однако я хотел использовать свой собственный контент вместо булавок для маркеров (небольшие превью контента), поэтому я создал их, используя InfoBox в качестве метки карты. Затем, в свою очередь, щелкнув их, я открываю InfoBox в качестве замены InfoWindow.

Проблема в том, что я не могу заставить прослушиватель событий передать щелчок по замене булавки. Слушатель событий просто не улавливает его.

    // This works perfectly when var marker = new google.maps.Marker({
    // but registers nothing when var marker = new InfoBox(flookLabel);

    google.maps.event.addListener(marker, 'click', function() {      
    ib.close();
    ib = new InfoBox(cardDisplay);                
    ib.open(flookMap, marker);
    alert('yes');

  });

Чтобы увидеть все в контексте, я помещаю здесь всю свою функцию:

  var flookMap = {
  bounds: null,
  map: null
    };
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;
  blockLocate = false;
  var markersArray = [];
  var point;
  ib = new InfoBox();


    // get the results XML back and draw it on the map
    loadCards = function(filename) {
        setStatus("Waiting for response");
      $.get(filename, function(xml){
        var results = $(xml).find("card").length;
        setStatus("Server gave me " +results+ " cards");
        if (results == 0){
            setStatus("I got no cards for you dude");
            }
        else {
        $(xml).find("card").each(function(){
          var name = $(this).find('name').text();
          var address = $(this).find('placename').text();
          var imageUrl = $(this).find('imageUrl').text();
          // create a new LatLng point for the marker
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
          var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

          // extend the bounds to include the new point
          //flookMap.fitBounds(results[0].geometry.viewport);
          flookMap.bounds.extend(point);


    var labelText = "test";

    var flookLabel = {
                     content: labelText
                    ,boxStyle: {
                       border: "5px solid black"
                      ,textAlign: "center"
                      ,fontSize: "8pt"
                      ,width: "50px"
                     }
                    ,disableAutoPan: true
                    ,pixelOffset: new google.maps.Size(-25, 0)                      
                    ,position: point
                    ,closeBoxURL: ""
                    ,isHidden: false
                    ,pane: "mapPane"
                    ,enableEventPropagation: true
            };

            var marker = new InfoBox(flookLabel);           
            marker.open(flookMap);
            markersArray.push(marker);


    /*       add the marker itself 
          var marker = new google.maps.Marker({
            position: point,
            map: flookMap
          });
          setStatus('Drawing pin' + point);
          markersArray.push(marker);
    */
          // create the tooltip and its text
            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: rgba(0,0,0,0.5); padding: 5px; -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.2); -webkit-border-radius: 8px;";
            boxText.innerHTML = '<p>'+name+'</p><br />'+address+'<br /><img width="460" height="300" src="'+imageUrl+'" />';
            var cardDisplay = {
                     content: boxText
                    ,disableAutoPan: false
                    ,maxWidth: 0
                    ,pixelOffset: new google.maps.Size(-250, -400)                     
                    ,zIndex: null
                    ,boxStyle: { 
                      // background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat"
                      opacity: 1
                      ,width: "500px"
                      ,height: "400px"
                     }
                    ,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
            };

          // add a listener to open the tooltip when a user clicks on one of the markers
          google.maps.event.addListener(marker, 'click', function() {      
            ib.close();
            ib = new InfoBox(cardDisplay);                
            ib.open(flookMap, marker);
            alert('yes');

          });
        });

        // Fit the map around the markers we added:
        flookMap.fitBounds(flookMap.bounds);
        setStatus("Zooming map to new bounds:" +flookMap.bounds);

        }
      });
    }

person Tristan Brotherton    schedule 19.08.2010    source источник


Ответы (1)


Я думаю, что у меня была похожая проблема. AFAIR Я продал это так:

  • функция прослушивателя событий инкапсулировала другую функцию:
  • инфобокс инициализировался, но не отображался,

чем при создании маркера я добавляю слушателя:

google.maps.event.addListener(marker, "click", function(e){ 
   loadTooltipContent(id, marker);
});

и тогда:

loadTooltipContent = function(id, marker){
  infobox.setContent('<div>Loading...</div>');
  infobox.open(map,marker);
    // than the ajax request... etc.
}
person Dziad Borowy    schedule 19.08.2010