Google지도 API v3 맞춤 오버레이에서 전달되지 않은 클릭 이벤트

Question

나는 내 Google지도에서 맞춤 오버레이를 그리기 위해 InfoBox을 사용 해왔다. XML lat longs 등에서로드하고,지도에 핀을 그리고 사용자 정의 infowindow를 표시합니다. 그러나 좋은 점은 마커 용 핀 대신 내 자신의 콘텐츠 (콘텐츠의 작은 미리보기)를 사용하고 싶었 기 때문에 인포 박스를지도 라벨로 사용하여 만들었습니다. 그런 다음 차례로 클릭하여 InfoWindow 대체품으로 InfoBox를 엽니 다.

문제는 나에게있어 핀 교체를 클릭하는 이벤트 리스너를 얻을 수 없다는 것입니다.

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

가 나는 비슷한 문제가 있다고 생각 : 이벤트 리스너는 그냥 여기 내 전체 기능에 넣어 맥락에서 모든 것을보기 위해

// 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'); 

    }); 

.. 그것을 선택하지 않습니다. 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. 
} 

청취자를 추가