将信息窗口添加到谷歌地图

Question

我正在尝试将一些信息窗口内容添加到我在谷歌地图上的标记中。我可以查询我的服务器，获取一些数据，将标记放在地图上。这样可行。不起作用的是当我单击标记时没有任何反应。我认为信息窗口会弹出。不幸的是，我已经很久没有做过谷歌地图编程了，我实际上正在重新开始。由于某种原因，没有调用标记的点击事件。任何关于我的愚蠢的建议都值得赞赏。 TIA

<script>
    var map, geocoder;
    var Markers = [];
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 0.0, lng: 0.0 },
            zoom: 12
        });
        if (!Modernizr.geolocation) {
            alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.")
            return;
        }
        else {
            navigator.geolocation.getCurrentPosition(show_map);
        }
    }
    function show_map(position) {
        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/xxxxxxxxjsonendpoint";
        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
                });
                var infowindow = new google.maps.InfoWindow({
                    content: i
                });
                makeInfoWindowEvent(map, infowindow, "test" + i, marker);
            }
        });
    }
    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);
            }
        });
    }
    function makeInfoWindowEvent(map, infowindow, contentString, marker) {
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
    }
</script>

---

这是我的代码的最新更新。还是不行…………

<script>
    var map, geocoder;
    var Markers = [];
    var infowindow;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 0.0, lng: 0.0 },
            zoom: 12
        });
        infowindow = new google.maps.InfoWindow();
        if (!Modernizr.geolocation) {
            alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.")
            return;
        }
        else {
            navigator.geolocation.getCurrentPosition(show_map);
        }
    }
    function show_map(position) {
        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/xxxxxxx/yyyyyyyyyy";
        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
                });

                makeInfoWindowEvent(infowindow, "test" + i, marker);
            }
        });
    }
    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);
            }
        });
    }
    function makeInfoWindowEvent(infowindow, contentString, marker) {
        (function (zinfowindow, zcontentString, zmarker) {
            zinfowindow.setContent(zcontentString);
            google.maps.event.addListener(zmarker, 'click', function () {
                zinfowindow.open(map, zmarker);
            });
        })(infowindow, contentString, marker);
    }
</script>

Answer 1

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
    infowindow.setContent(contentString);
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
}

Answer 2

您的代码崩溃是因为当监听器调用时，marker 和 infowindow 的值已经改变。您可以尝试这样的事情（只需更改 makeInfoWindowEvent 函数）：

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
        console.log (contentString);
        console.log (marker);
    });
}

通常，contentString 和 marker 的输出将始终相同。

为了传递marker、contentString 和infowindow 的真实值，您必须创建一个IIFE。像这样，变量的值将被复制到函数内部：

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
    (function (zinfowindow, zcontentString, zmarker) {
       zinfowindow.setContent(zcontentString);
       google.maps.event.addListener(zmarker, 'click', function () {
         zinfowindow.open(map, zmarker);
       });
    })(infowindow, contentString, marker);
}

但是，您不需要将 map 作为参数传递，因为 map 的值始终相同。

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