Question

我有以下代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        function initialize() {
            var cities = {{json|safe}};

            /*
            for (i in cities) { // 0, 1
                // document.write(cities[i]['fields']['name'] +'<br />');
                document.write(cities[i]['fields']['x'] +'<br />');
                document.write(cities[i]['fields']['y'] +'<br />');
                document.write('<br />');
            } /* */

            var center = new google.maps.LatLng(-22.784791,-45.088806);
            var myOptions = {
                zoom: 8,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var citiesLoc = new Array();
            // var flightPlanCoords = new Array();
            var infoBoxes = new Array();
            var markers = new Array();

            for (var i in cities) {
                // document.write(cities[i]['fields']['name'] );
                citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']);

                // flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']));

                infoBoxes[i] = new google.maps.InfoWindow({
                    content: "<div>" + cities[i]['fields']['name'] + "</div>"
                });

                markers[i] = new google.maps.Marker({
                    position: citiesLoc[i],
                    map: map,
                    title: cities[i]['fields']['name']
                });


                google.maps.event.addListener(markers[i], 'click', function() {
                    infoBoxes[i].open(map, markers[i]);
                });


            };




            // document.write(infoBoxes[1]['content']);
            /*
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoords,
                strokeColor: "#0000ff",
                strokeOpacity: 1.0,
                strokeWeight: 5
            });
            flightPath.setMap(map);
             */
        }

    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

其中设置了两个带有两个infowindows的标记，但是当我单击其中一个时，只显示其中一个（数字1为2，零索引）。如果我这样写：

 google.maps.event.addListener(markers[0], 'click', function() {
                infoBoxes[0].open(map, markers[0]);
            });
            google.maps.event.addListener(markers[1], 'click', function() {
                infoBoxes[1].open(map, markers[1]);
            });

然后它工作得很好。我错过了什么？

Answer 1

在您的功能内部评估infoBoxes[i].open(map, markers[i]);时，它将采用i的更新值，即循环结束后的1更新值。

只需在那里alert(i)看看会发生这种情况。

这是一个粗略的修复（测试和工作）：

markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
    infoBoxes[this._index].open(map, markers[this._index]);
});

你应该在这里阅读更多http://code.google.com/apis/maps/documentation/javascript/events.html。我知道这很重要，但有时候是必要的。

Answer 2

我真的不知道问题是什么......这个问题仍然没有答案。但是这个技巧有效：我创建了两个计数器并在循环中使用并递增它们。我真的不知道为什么这应该有效，这不是编程的方法，但是这里就是。

            counter1 = 0;
            counter2 = 0;
            for (var i in cities) {
                // document.write(cities[i]['fields']['name'] );
                citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']);

                // flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']));

                infoBoxes[i] = new google.maps.InfoWindow({
                    content: "<div>" + cities[i]['fields']['name'] + "</div>"
                });

                markers[i] = new google.maps.Marker({
                    position: citiesLoc[i],
                    map: map,
                    title: cities[i]['fields']['name']
                });

                google.maps.event.addListener(markers[i], 'click', function() {
                    infoBoxes[counter1++].open(map, markers[counter2++]);
                });

            };

Google Maps API - 无法在多个标记上设置多个infoWindows

2 个答案: