Google지도, addlistener가 작동하지 않습니다.

Question

프로젝트에서 Google지도를 사용하고 있으며지도에 클릭 할 수있는 마커를 표시하려고합니다. 각지도에 다른 데이터가 포함 된 Div가 표시되기 때문에이 코드는 데이터는 데이터베이스를 형성하고 잘 작동 후 나는이 같은지도에 표시 : 나는 "(마커가 경고를 somtimes 클릭 클릭하면

showHazardsOnMap(result); 

    function showHazardsOnMap(hazards) { 
    var imgHzr = { 
     url: "images/hazardPointer.png", // url 
     scaledSize: new google.maps.Size(60, 60), // scaled size 
     origin: new google.maps.Point(0, 0), // origin 
     anchor: new google.maps.Point(0, 0) 
    }; 

    setMapOnAll(null); 
    for (var i = 0; i < hazards.length; i++) { 
     markerHzr = new google.maps.Marker({ 
      position: { lat: hazards[i].Hazard_Lat, lng: hazards[i].Hazard_Long  }, 
      map: map, 
      icon: imgHzr, 
      animation: google.maps.Animation.DROP 
     }); 
     showHazardDetails(marker, hazards[i]); 
     } 
     } 
    } 

    function showHazardDetails(mark, data) { 
     google.maps.event.addListener(mark, 'click', function() { 
      alert("clicked!!!!!!!!!!!!!!!!"); 
      $("#hazardID").html(data.Hazard_ID); 
      $("#hazardImgInfo").attr("src", data.Hazard_Image); 
      $("#pDate").html(data.Hazard_DateTime); 
      $("#pDes").html(data.Hazard_Description); 
      $(".hazardInfo").fadeIn(1000); 
     }); 
    } 

좋아, 지금은지도에 마커를 볼 수 있습니다! ") 작동하지만 그것은 내가보고 싶어하는 나의 사업부를 보여주지 못한다.

나는 리스너가 호출 될 때, mark 및 infowindow의 값이 이미 변경 되었기 때문에 CSS 어쩌면 그들이

.hazardInfo { 
width: 80%; 
height: 80%; 
background-color: #f5821f; 
z-index: 2000; 
position: fixed; 
top: 10%; 
right: 10%; 
opacity:0.9; 
text-align: center; 
display: none; 
border: none; 
border-radius: 10px;  
} 


<div class="hazardInfo"> 
    <p id="hazardID"></p> 
    <img src="images/backbtn.png" class="backButton" /><br> 
    <p id="pDate" style="font-size:18px; margin-top:11%;"></p><br> 
    <img src="images/156.jpg" id="hazardImgInfo" style="height: 40%; width: 90%; border-radius:15px;"><br> 
    <p id="pDes" style="font-size:17px; margin-top:4%; margin-right:4%; width:90%;"></p><br> 
    <div id="thumbsUp">הוסף לרשימה</div> 
</div> 

Answer 1

귀하의 코드 충돌 도움이됩니다, HTML의 부분을 연결합니다. 당신은 (단지 showHazardDetails 기능을 변경) 이런 식으로 뭔가를 시도 할 수 있습니다 :

function showHazardDetails(mark, data) { 
    google.maps.event.addListener(mark, 'click', function() { 
     alert("clicked!!!!!!!!!!!!!!!!"); 
     console.log (mark); 
     console.log (data); 
    }); 
} 

일반적으로는, 출력은 항상 mark 및 data에 대해 동일합니다.

마커 contentString 및 infowindow의 실제 값을 전달하려면 IIFE을 만들어야합니다. 이와 같이 변수의 값은 함수 내에서 복사 될 것입니다 :

function showHazardDetails(mark, data) { 
    (function (zmark, zdata) { 
    google.maps.event.addListener(zmark, 'click', function() { 
     alert("clicked!!!!!!!!!!!!!!!!"); 
     $("#hazardID").html(zdata.Hazard_ID); 
     $("#hazardImgInfo").attr("src", zdata.Hazard_Image); 
     $("#pDate").html(zdata.Hazard_DateTime); 
     $("#pDes").html(zdata.Hazard_Description); 
     $(".hazardInfo").fadeIn(1000); 
    }); 
    })(mark, data); 
} 

당신은 how closures work을 보일 수 있습니다.

질문이 있으시면 알려주십시오.