javascript - 谷歌地图，addlistener 不工作

Question

我在一个项目中使用谷歌地图，我想在 map 上显示一些可点击的标记，每个标记都显示一个包含不同数据的 Div，所以我通过从数据库中获取数据来开始我的代码并工作好吧，然后我像这样在 map 上显示它:

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

好的，现在我可以看到 map 上的标记了，当我点击标记时有时会出现警报(“点击!!!”)，但它没有显示我想要查看的 Div，有时也没有显示我什至警觉。

我会附上 HTML 和 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

您的代码崩溃是因为当监听器调用时，mark 和 infowindow 的值已经改变。您可以尝试这样的操作(只需更改 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 .

如果您有任何问题，请告诉我。