Google Maps, addlistener funktioniert nicht

Question

Ich benutze Google Maps in einem Projekt und möchte einige anklickbare Markierungen auf der Karte anzeigen, jede von ihnen zeigt eine Div mit verschiedenen Daten, so dass ich meinen Code gestartet habe, indem ich die Daten, die die Datenbank bilden und funktioniert gut, ich es dann so auf der Karte angezeigt werden:

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); 
     }); 
    } 

Ok, jetzt kann ich die Markierungen auf der Karte sehen, wenn ich eine Markierung klicken sie auf die alert ("klicken somtimes !!! ") Arbeit, aber es zeigt nicht meine Div, die ich sehen will, und manchmal zeigt es mir nicht einmal die Alarmbereitschaft.

Ich werde den Teil von HTML, CSS anhängen vielleicht werden sie

helfen

.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

Ihr Code Absturz, weil, wenn der Hörer anruft, haben den Wert von mark und infowindow bereits geändert. Sie können so etwas wie diese (nur ändern, um die showHazardDetails Funktion) versuchen:

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

Normalerweise wird der Ausgang immer das gleiche für mark und data.

Um den realen Wert des Markers, contentString und infowindow zu übergeben, müssen Sie einen IIFE erstellen. Wie diese, wird der Wert der Variablen innerhalb der Funktion kopieren sein:

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); 
} 

Sie how closures work aussehen.

Sagen Sie mir, wenn Sie ein paar Fragen haben.