解决百度地图多个Marker和InfoWindow时总是打开最后一个InfoWindow的问题

 在做项目的过程中，发现了在使用百度地图的过程中，加入多个Marker和多个InfoWindow的时候，多个Marker可以在地图上不同的坐标点显示出来，但是当点击不同的Marker的时候，显示的总是最后一个Marker对应的InfoWindow。至少直接写For循环是这个样子的。

于是乎我看到之前的代码是对应着写：Marker1,InfoWindow1, Marker2,InfoWindow2, Marker3,InfoWindow3。我的个天呀，如果是100个呢？那得有多少的代码呀？
下面的代码是在原代码的基础上修改的，肯定还有很大提升的空间。

我们取到的数据，也就是下面data中的数据:

[javascript] view plaincopy
[{"Id":"2a20ee78-f201-4618-955a-a0d0b6bc5ba4","AppInfoId":0,"ParentId":"a2928e7e-a2af-4028-91aa-276e8b197f14","ParentName":"","CollectionTypeId":0,"Name":"落霞水榭码头","Introduce":"落霞水榭游船码头集观光、旅游等多种功能于一身、牡丹园等景点。","Longitude":"114.388207","Latitude":"30.578016","PixelX":"3390","PixelY":"1530","CollectionCount":0,"Rank":0,"IsEnable":1,"CreateUserId":"","CreateTime":"0001-01-0100:00:00","UpdateTime":"2014-03-1411:02:11","ImageUrls":[],"ScenicSpots":[],"VoiceIds":"/Resources/Voices/0001.mp3"},{"Id":"a9246850-d393-41f6-99a5-f2ef90dbcbde","AppInfoId":0,"ParentId":"a2928e7e-a2af-4028-91aa-276e8b197f14","ParentName":"","CollectionTypeId":0,"Name":"汉街中心码头","Introduce":"汉街中心码头位于沙湖湖畔","Longitude":"114.340402","Latitude":"30.566693","PixelX":"340","PixelY":"740","CollectionCount":0,"Rank":0,"IsEnable":1,"CreateUserId":"","CreateTime":"2014-01-0716:48:01","UpdateTime":"2014-01-18 16:37:30","ImageUrls":[],"ScenicSpots":[],"VoiceIds":"/Resources/Voices/donghutest.mp3"},{"Id":"ecb5128d-be9b-49d0-a7dc-eb527217fa62","AppInfoId":0,"ParentId":"a2928e7e-a2af-4028-91aa-276e8b197f14","ParentName":"","CollectionTypeId":0,"Name":"磨山梅园码头","Introduce":"磨山梅磨山梅园码头依山傍水，","Longitude":"114.410607","Latitude":"30.555938","PixelX":"2790","PixelY":"2800","CollectionCount":0,"Rank":0,"IsEnable":1,"CreateUserId":"","CreateTime":"2014-01-1818:48:01","UpdateTime":"2014-01-2017:40:15","ImageUrls":[],"ScenicSpots":[],"VoiceIds":""}]  


[javascript] view plaincopy
//获取子景点  
        var scenicSpots;  
        $(function () {  
            getList();  
        })  
        function getList() {  
            // 不同的应用所调用的API参数是不相同的，请修改  
            $.getJSON("/api", {},  
                function (data) {  
                    scenicSpots = data;  
  
                    var myIcon = new BMap.Icon("poi.png", new BMap.Size(23, 33), {    //  
                        offset: new BMap.Size(0, 0),    //相当于CSS精灵  
                        imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。  
                    });  
                    var myIconHover = new BMap.Icon("poi_hover.png", new BMap.Size(40, 50), {    //小车图片  
                        offset: new BMap.Size(-7, -7),    //相当于CSS精灵  
                        imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。  
                    });  
                     
                      
                    for (var i = 0; i < scenicSpots.length; i++) {              
                        var point = new BMap.Point(scenicSpots[i].Longitude, scenicSpots[i].Latitude);     //POI点坐标  
                        var marker = new BMap.Marker(point, { icon: myIcon });  
                        var iw = createInfoWindow(i);                       
                        drawMap.addOverlay(marker);  
  
                          
                        (function () {  
                            var index = i;  
                            var _iw = createInfoWindow(i);  
                            var _marker = marker;  
                            _marker.addEventListener("click", function () {  
                                this.openInfoWindow(_iw);  
                                  
                            });  
                            _iw.addEventListener("open", function () {                             
                                _marker.setIcon(myIconHover);  
                            })  
                            _iw.addEventListener("close", function () {  
                                _marker.setIcon(myIcon);  
                            })  
                        })()  
                    }                      
  
                })  
        }  
       
        //对应不同的Marker创建不同的InfoWindow  
        function createInfoWindow(i) {  
            var sContent = "<div class='mark_tip_top'><p>" + scenicSpots[i].Introduce + "</p></div><div class='mark_tip_bottom' data-audio='" + scenicSpots[i].VoiceIds + "'><a class='play' href='javascript:void(0);'><span><i>语音</i></span></a><a class='' href='/EastLakeBoat/BeautyPicture/BeautyPictureByScenicSpotId?id=" + scenicSpots[i].Id + "'><span><i>图片</i></span></a><a class='go_map' onclick='return gomap_oclick(0)'><span><i>去这</i></span></a></div>";  
            var iw = new BMap.InfoWindow("", { enableMessage: false });  
            iw.setTitle("<label style=\"font-size: 16px;font-weight: bold;color: #CD533F;font-family: 'microsoft yahei';\">" + scenicSpots[i].Name + "</label>");  
            iw.setContent(sContent);  
            return iw;  
        }