谷歌地图 - 标记点击事件未触发

Question

我显然做错了什么，但如果我知道它是什么，那我就危险了。我有以下代码，我将地图放在网页上，获取边界，回调我的系统并获取系统内的位置，并在地图上显示标记。我想在单击标记时显示一些数据，但是，我没有触发标记的单击事件。我显然错过了一些东西，但不知道它是什么。任何想法表示赞赏。 TIA。

    map.setZoom(12);
    var Latitude = position.coords.latitude;
    var Longitude = position.coords.longitude;
    map.setCenter({ lat: Latitude, lng: Longitude });
    var bounds = map.getBounds();
    var url = "/api/ReportingWeb/NearbyCleanliness";
    var lowerLeft = bounds.getSouthWest();
    var upperRight = bounds.getNorthEast();
    var lat0 = lowerLeft.lat();
    var lng0 = lowerLeft.lng();
    var lat1 = upperRight.lat();
    var lng1 = upperRight.lng();
    var geocoder = new google.maps.Geocoder();
    var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 };
    $.get(url, data, function (result) {
        for (var i = 0; i < result.length; i++) {
            var address = result[i].Address1 + " " +
                (result[i].Address2 != null ? result[i].Address2 : "") +
                " " + result[i].City + " " + result[i].Province + " " +
                result[i].PostalCode + " " + result[i].Country;
            var marker = new google.maps.Marker({
                position: geocodeAddress(geocoder, map, address),
                map: map,
                title: address,
                content: address
            });
            marker.addListener('click', function () {
                console.log("clicked");
                alert("hi");
            });
        }
    });
    function geocodeAddress(geocoder, resultsMap, address) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status === 'OK') {
                resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: resultsMap,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
}

Answer 1

geocodeAddress() 未返回位置，因此您的标记代码放置不正确。

标记单击侦听器应与 geocodeAddress() 中的标记创建代码一起设置。

您在 geocodeAddress 内部创建标记，但在其外部设置了 onclick，它们不起作用。

        map.setZoom(12);
        var Latitude = position.coords.latitude;
        var Longitude = position.coords.longitude;
        map.setCenter({ lat: Latitude, lng: Longitude });
        var bounds = map.getBounds();
        var url = "/api/ReportingWeb/NearbyCleanliness";
        var lowerLeft = bounds.getSouthWest();
        var upperRight = bounds.getNorthEast();
        var lat0 = lowerLeft.lat();
        var lng0 = lowerLeft.lng();
        var lat1 = upperRight.lat();
        var lng1 = upperRight.lng();
        var geocoder = new google.maps.Geocoder();
        var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 };
        $.get(url, data, function (result) {
            for (var i = 0; i < result.length; i++) {
                var address = result[i].Address1 + " " +
                    (result[i].Address2 != null ? result[i].Address2 : "") +
                    " " + result[i].City + " " + result[i].Province + " " +
                    result[i].PostalCode + " " + result[i].Country;
                //-------need not create markers here------------------
                geocodeAddress(geocoder, map, address);
            }
        });
        //-------place marker onclicks inside the function------------------
        function geocodeAddress(geocoder, resultsMap, address) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status === 'OK') {
                    resultsMap.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: resultsMap,
                        position: results[0].geometry.location,
                        title: address,
                        content: address
                    });
                    marker.addListener('click', function () {
                        console.log("clicked");
                        alert("hi");
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
    }