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

于是乎我看到之前的代码是对应着写：Marker1,InfoWindow1, Marker2,InfoWindow2, Marker3,InfoWindow3。我的个天呀，如果是100个呢？那得有多少的代码呀？

下面的代码是在原代码的基础上修改的，肯定还有很大提升的空间。

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

[{"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":""}]

//获取子景点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创建不同的InfoWindowfunction 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' οnclick='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;}