多個標記與獨特的infowindows使用谷歌地圖javascript api v3

Question

我知道這個問題是遍布堆棧溢出的。 但是我已經在這里工作了好幾天，但沒有一個解決方案有效。 我會發布我正在做的一切，也許有人會看到我的錯誤。 我更願意對其他現有問題發表評論，但需要50個代表...我希望有足夠的評論來幫助您閱讀代碼，但讓我總結一下。 我有地圖的初始化功能。 由於我的地圖是關於方向的，因此有一個calcRoute（）函數。 此功能從谷歌獲取路線，並放入地圖。 我還在路線上放置了一些標記，那就是parksToPlaceArray。 所以如果ajax成功返回，我會解析數據並添加標記。 在下面創建標記我試圖為infowindow添加一個事件監聽器，但它不起作用。 我想得到一個概念，因為我想有一個標題，小描述，可能是一個縮略圖，並有標題鏈接到詳細信息頁面。

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var infowindow;
    var parksToPlaceArray = [];

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var desoto = new google.maps.LatLng(27.521692, -82.643475); // just a default start value to the map
        var mapOptions = {
            zoom: 15,
            center: desoto
        };


        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        directionsDisplay.setMap(map);

        // Resize stuff...
        // makes the map responsive by continuously centering the map on resize
        google.maps.event.addDomListener(window, "resize", function () {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center);
        });

        infowindow = new google.map.InfoWindow();

        // marker click
        //google.maps.event.addListener(marker, 'click', function () {
        //    //map.setZoom(8);
        //    //map.setCenter(marker.getPosition());
        //});


    }

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);




                // This ajax call goes out to loadparksbyroute.cshtml with the bounds of the route, and returns a json array of possible parks
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    url: "/getDataPage",
                    success: function (ajaxResponse) {

                        // SUCCESS FUNCTION - RETURNED FROM AJAX ==================================================================


                        var parksResponse = ajaxResponse;
                        // we now have a list of all locations in the zone

                        parksToPlaceArray = getParks();



                        for (i = 0; i < parksToPlaceArray.length; i++) {
                            var myLatlng = new google.maps.LatLng(parksToPlaceArray[i].addresses[0].latitude, parksToPlaceArray[i].addresses[0].longitude);

                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: parksToPlaceArray[i].recAreaName 
                            });

                            //google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            //    return function () {
                            //        infowindow.setContent('<h3>' + this.title + '</h3>');
                            //        infowindow.open(map, marker);
                            //    }
                            //})(marker, i));

                            google.maps.event.addListener(marker, 'click', function () {
                                infowindow.setContent('<h3>' + this.title + '</h3>');
                                infowindow.open(map, this);
                            });

                        }


                    },
                    // END OF SUCCESS FUNCTION FROM AJAX CALL
                    error: function (response) {
                        console.log('error');
                    }
                });


            }
        });


    }

    // when the page loads initialize the map
    google.maps.event.addDomListener(window, 'load', initialize);

我已經嘗試了幾個不同的地方來放置事件監聽器。 我不能真正把它放在初始化中，因為實際的標記是使用ajax引入的。 我有一個位置'parksToPlaceArray'的列表，我循環通過它創建一個標記並放置它。 一切都有效，除了點擊標記的能力。

編輯：所以我根據評論進行了更改，現在點擊任何標記顯示一個項目的一個信息。 任何標記點擊都會在同一標記上顯示相同的單個信息窗口

for (i = 0; i < parksToPlaceArray.length; i++) {
                            var myLatlng = new google.maps.LatLng(parksToPlaceArray[i].addresses[0].latitude, parksToPlaceArray[i].addresses[0].longitude);

                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: parksToPlaceArray[i].recAreaName 
                            });

                            //google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            //    return function () {
                            //        infowindow.setContent('<h3>' + this.title + '</h3>');
                            //        infowindow.open(map, marker);
                            //    }
                            //})(marker, i));

                            var contentString = parksToPlaceArray[i].recAreaName;
                            marker.infowindow = new google.maps.InfoWindow({
                                content: contentString
                            });

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

                        } 

Answer 1

澄清一下：您想知道在單擊標記時如何關閉其他信息窗口。

答案是使用單個信息窗口。 所以你更接近原始代碼。

要使原始代碼工作，你應該像這樣編寫for循環（因為循環中有一個函數閉包）

for (i = 0; i < parksToPlaceArray.length; i++) (function(i) {
    // ...
})(i);

所以你應該寫

for (i = 0; i < parksToPlaceArray.length; i++) (function(i) {
    var myLatlng = new google.maps.LatLng(
        parksToPlaceArray[i].addresses[0].latitude,
        parksToPlaceArray[i].addresses[0].longitude);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: parksToPlaceArray[i].recAreaName 
    });

    marker.addListener('click', function() {
        infowindow.setContent('<h3>' + marker.title + '</h3>');
        infowindow.open(map, marker);
    });
})(i);

Answer 2

我相信你的問題與你處理信息的方式有關。 你應該按照以下方式遵循一種模式：

1. 為每個點（公園）創建標記
2. 創建一個包含標記所需內容的信息窗口
3. 將infowindow添加到標記中
4. 為標記添加事件處理程序，以打開您添加到其中的信息窗口。

你在做什么是：

1. 創建一個infowindow
2. 為每個點（公園）創建標記
3. 為每個標記添加一個事件處理程序，打開不受任何攻擊的單個infowindow。

嘗試修改：

var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: parksToPlaceArray[i].recAreaName 
                            });


google.maps.event.addListener(marker, 'click', function () {
                                infowindow.setContent('<h3>' + this.title + '</h3>');
                                infowindow.open(map, this);
                            });

對於以下內容：

var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: parksToPlaceArray[i].recAreaName 
                            });

marker.infowindow = new google.maps.InfoWindow({ content: '<h3>' + this.title + '</h3>' }); 

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

Answer 3

好的，我在評論的幫助下得到了它

問題是為標記設置了一個infowindow作為屬性，事件監聽器使用它而不是標記。 以下是我所做的更改，我完全刪除了全局信息窗口

var contentString = '<h3>' + parksToPlaceArray[i].recAreaName + '</h3>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: parksToPlaceArray[i].recAreaName,
        infowindow: infowindow
    });

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