高德地图JS-API开发—Marker添加及infoWindow处理

// 添加 Marker
        function addMarker(jsonData) {
            for (var i = 0; i < jsonData.length; i++) {
                var pointX = jsonData[i].x;
                var pointY = jsonData[i].y;
                var rr = window.rr;
                var point = rangeDis(pointX, pointY, rr)
                if (point == undefined) {
                    continue;
                }

                // 测距(定位到商家)
                var icon = jsonData[i].myIcon
                var music = jsonData[i].music
                var title = jsonData[i].title
                var marker = new AMap.Marker({
                    position: point,
                    map: map,
                    icon: icon,
                    label: {
                        offset: new AMap.Pixel(0, 1), //设置文本标注偏移量
                        content: "<div class='info'>" + title + "</div>", //设置文本标注内容
                        direction: 'top' //设置文本标注方位
                    },
                    title: title,
                    price: jsonData[i].price,
                    img: jsonData[i].img,
                    imgvr: jsonData[i].imgvr,
                    address: jsonData[i].address,
                    music: jsonData[i].music,
                    visible: true,
                });

                AMap.event.addListener(marker, 'click', function(e) {
                    
                    var clouddata = e.target.B;
                    console.log(clouddata)
                    _location = [clouddata.position.lng, clouddata.position.lat];

                    document.getElementById("testo").setAttribute("src", clouddata.music);
                    //实例化信息窗体
                    var title = clouddata.title,

                        content = [];

                    // 景点有音频
                    var infoWindowSpotYes = new AMap.InfoWindow({
                        content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
                            "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                            "<div id=" + clouddata.music +
                            " class='tr_music' οnclick='playMusic(this)'><img οnclick='bf_bt(this)' class='imgss' src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/img/bftb1.png'/></div>" +
                            "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                            "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                            "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                            "&name=" + title +
                            "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                        size: new AMap.Size(0, 0),
                        autoMove: true,
                        closeWhenClickMap: true,
                        offset: new AMap.Pixel(0, -25)
                    });

                    // 景点无音频
                    var infoWindowSpotNo = new AMap.InfoWindow({
                        content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
                            "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                            "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                            "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                            "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                            "&name=" + title +
                            "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                        size: new AMap.Size(0, 0),
                        autoMove: true,
                        closeWhenClickMap: true,
                        offset: new AMap.Pixel(0, -25)
                    });

                    // 酒店+美食
                    var infoWindowHF = new AMap.InfoWindow({
                        content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
                            clouddata.price + "</div></div>" +
                            "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                            "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                            "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                            "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                            "&name=" + title +
                            "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                        size: new AMap.Size(0, 0),
                        autoMove: true,
                        closeWhenClickMap: true,
                        offset: new AMap.Pixel(0, -25)
                    });

                    // 厕所停车场
                    var infoWindowWCP = new AMap.InfoWindow({
                        content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
                            clouddata.price + "</div></div>" +
                            "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                            "<a class='tr_dha' href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position
                            .lat +
                            "&name=" + title +
                            "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                        size: new AMap.Size(0, 0),
                        autoMove: true,
                        closeWhenClickMap: true,
                        offset: new AMap.Pixel(0, -25)
                    });
                    if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape.png") {
                        infoWindowSpotNo.open(map, _location);
                    } else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape_audio.png") {
                        infoWindowSpotYes.open(map, _location);
                    } else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/hotel.png" || clouddata.icon ==
                        "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/food.png") {
                        infoWindowHF.open(map, _location);
                    } else {
                        infoWindowWCP.open(map, _location);
                    }
                });

            }
        }

可根据不同marker设计不同信息窗体