在做项目的过程中，发现了在使用百度地图的过程中，加入多个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创建不同的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;
        }

解决百度地图多个Marker和InfoWindow时总是打开最后一个InfoWindow的问题,布布扣,bubuko.com

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