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

时间:2017-12-27 14:47:36

标签: google-maps google-maps-api-3

我显然做错了什么,但如果我知道它是什么就会有所危险。我有以下代码,我将地图放在网页上,获取边界,回调我的系统并获取系统中的位置,并在地图上显示标记。我想在点击标记时显示一些数据,但是,我没有得到标记的点击事件。我显然遗漏了一些东西,但不知道它是什么。任何想法都表示赞赏。 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);
            }
        });
    }
}

1 个答案:

答案 0 :(得分:0)

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