Google Maps API v3自定義疊加層未傳遞的點擊事件

Question

我一直在使用InfoBox在GoogleMap上繪製自定義疊加層。 總之，我從XML經緯度等加載，在地圖上繪製引腳，並顯示一個自定義的infowindow。一切都很好，但是我想用我自己的內容代替標記的內容（內容的小預覽），所以我使用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); 

     } 
     }); 
    } 

Answer 1

我想我也有類似的問題。 AFAIR我solded這樣的：

• 事件監聽功能被封裝的另一個功能：
• 信息框被初始化，但未顯示，

創建標記時比，我添加監聽器：

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. 
}