使用谷歌地图javascript api v3具有独特信息窗口的多个标记

Question

我知道这个问题是通过堆栈溢出发布的。但是我已经为此工作了好几天，但没有一个解决方案奏效。我会发布我正在做的所有事情，也许有人会看到我的错误。我宁愿将 cmets 留在其他现有问题上，但需要 50 个代表...我希望有足够的 cmets 可以帮助您阅读代码，但让我总结一下。我有地图的初始化功能。因为我的地图是关于方向的，所以有一个 calcRoute() 函数。这个函数从谷歌获取一条路线，并放在地图上。我还在路线上放置了一些标记，即 parksToPlaceArray。因此，如果 ajax 成功返回，我会解析数据并添加标记。在创建标记的下方，我试图为信息窗口添加一个事件侦听器，但它不起作用。我想要一个概念，因为我想要一个标题、小描述，也许是一个缩略图，并有一个指向详细信息页面的标题链接。

    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”，我遍历它创建一个标记并放置它。除了能够点击标记之外，一切正常。

编辑：所以我根据 cmets 进行了更改，现在单击任何标记会在单个项目上显示一个信息窗口。任何标记点击都会在同一标记上显示相同的单个信息窗口

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. 将信息窗口添加到标记
4. 为打开您添加到其中的信息窗口的标记添加一个事件处理程序。

你正在做的是：

1. 创建单个信息窗口
2. 为每个点（公园）创建一个标记
3. 为每个打开单个信息窗口的标记添加一个事件处理程序，该信息窗口不会受到任何攻击。

尝试修改：

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

好的，我在评论的帮助下得到了它

问题是为标记设置一个信息窗口作为属性，而事件侦听器使用它而不是标记。这是我所做的更改，我完全删除了全局信息窗口

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