单击图钉可将它们全部打开

Question

需要帮助进行故障排除。单击单个图钉会打开所有图钉，从而打开每个图钉信息框。我希望有一个图钉信息框，每次单击图钉时都会更改，一次只允许打开一个信息框。

            // BING MAP Java Script    
            var map = null;
            var pinid = 0;
            var arrPinInfobox = [];
            //Bing V8 start
            function GetMap() { //LocInfo, Lat, Long
                var _MapElement = document.getElementById("myMap");
                if (_MapElement === null || typeof _MapElement === "undefined")
                    return;
                if(jQuery("#pagesitemap_4_noMap").length < 0)
                    return;
                var arrLocInfoRec = [];
                var arrLLAdder = [];
                var MapCenterLat;
                var MapCenterLong;
                var ZoomFactor;
                var ZipLLSource = jQuery("#hdnZipLL").val();
                var LocInfo = jQuery("#hdnCompleteLocInfo").val();
                var ZipLL = [];
                var Lat = "";
                var Long ="";
                console.log("Long");
                if(typeof LocInfo === "undefined")
                { 
                    console.log("locInfo Undefined");
                      return;
                }
                if (ZipLLSource.length > 0) {
                    ZipLL = (ZipLLSource).split("`");
                }
                if (LocInfo.length > 0) {
                    arrLocInfoRec = LocInfo.split("|")
                }
                if (Lat.length > 0 && Long.length > 0) {
                    MapCenterLat = parseFloat(Lat);
                    MapCenterLong = parseFloat(Long);
                    ZoomFactor = 11;  //16
                }
                else if (ZipLL.length >= 2) {
                    MapCenterLat = parseFloat(ZipLL[0]);
                    MapCenterLong = parseFloat(ZipLL[1]);
                    ZoomFactor = 11;
                }
                var mapOptions = {
                    credentials: '                       ',
                    center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
                    mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
                    zoom: ZoomFactor,
                    showScalebar: true
                }
                map = new Microsoft.Maps.Map('#myMap', mapOptions);
                var arrPins = [];
                var arrPinCenter = [];
                //Generating Pins for multiple locations with Lat,Long
                for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
                    try {
                        arrLLAdder = arrLocInfoRec[locNum].split("`");
                        if (arrLLAdder.length >= 13) {
                            //var latlong = arrLLAdder[11].split(',');
                            arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
                            arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
                            arrPins[locNum] = new Microsoft.Maps.Pushpin(
                                                                            arrPinCenter[locNum], { 
                                                                                                    text: arrLLAdder[8] ,
                                                                                                    icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
                                                                                                    anchor: new Microsoft.Maps.Point(12, 39) 
                                                                                                     }
                                                                        );
                            var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
                            // Create the infobox for the pushpin
                            arrPinInfobox[locNum] = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
                                {   width: 350,
                                    height: 100,
                                    title: arrLLAdder[5],
                                    description: adder,
                                    offset: new Microsoft.Maps.Point(-3,13),
                                    visible: false
                                });     
                            // Add handler for the pushpin click event.                       
                            Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);
                            // Add the Push Pins and InfoBox to the map all at once                         
                             if(arrPins.length > 0) {
                                map.entities.push(arrPins); //[locNum]
                            }
                        }
                        else {
                            console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
                        }
                    } catch (e) {
                        console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
                    }
                }      
            }
            function displayInfobox(e) {
                //map.entities.push(arrPinInfobox);
                console.log("DisplayBox");
                for(var i in arrPinInfobox){
                arrPinInfobox[i].setOptions({ visible: true });
                arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
                var infobox = arrPinInfobox[i];
                infobox.setMap(map);
                }
            }

Answer 1

displayInfobox 函数中的代码循环遍历所有信息框并将可见设置为 true 并将它们添加到地图。您的代码按照编写的方式运行。

您要做的是过滤掉您的信息框。就我个人而言，我讨厌整个信息框的想法，它很乱。我相信我之前已经推荐过创建单个信息框并在单击图钉时重新使用它的想法。如果您一次只需要显示一个信息框，那么这是最好的方法。如果您希望能够一次显示多个信息框，请以某种方式将对信息框的引用存储在图钉中。 Bing 地图中的所有形状都有元数据属性为您的自定义数据保留。还刚刚注意到您多次将图钉数组添加到地图，这会导致问题。这是对您的代码的提议更改，我添加了一条评论 // Ricky: 以表明我所做的更改：

// BING MAP Java Script    
var map = null;
var pinid = 0;
var arrPinInfobox = [];
//Bing V8 start
function GetMap() { //LocInfo, Lat, Long
    var _MapElement = document.getElementById("myMap");
    if (_MapElement === null || typeof _MapElement === "undefined")
        return;
    if(jQuery("#pagesitemap_4_noMap").length < 0)
        return;
    var arrLocInfoRec = [];
    var arrLLAdder = [];
    var MapCenterLat;
    var MapCenterLong;
    var ZoomFactor;
    var ZipLLSource = jQuery("#hdnZipLL").val();
    var LocInfo = jQuery("#hdnCompleteLocInfo").val();
    var ZipLL = [];
    var Lat = "";
    var Long ="";
    console.log("Long");
    if(typeof LocInfo === "undefined")
    { 
        console.log("locInfo Undefined");
          return;
    }
    if (ZipLLSource.length > 0) {
        ZipLL = (ZipLLSource).split("`");
    }
    if (LocInfo.length > 0) {
        arrLocInfoRec = LocInfo.split("|")
    }
    if (Lat.length > 0 && Long.length > 0) {
        MapCenterLat = parseFloat(Lat);
        MapCenterLong = parseFloat(Long);
        ZoomFactor = 11;  //16
    }
    else if (ZipLL.length >= 2) {
        MapCenterLat = parseFloat(ZipLL[0]);
        MapCenterLong = parseFloat(ZipLL[1]);
        ZoomFactor = 11;
    }
    var mapOptions = {
        credentials: '                       ',
        center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
        mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
        zoom: ZoomFactor,
        showScalebar: true
    }
    map = new Microsoft.Maps.Map('#myMap', mapOptions);
    var arrPins = [];
    var arrPinCenter = [];

    //Generating Pins for multiple locations with Lat,Long
    for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
        try {
            arrLLAdder = arrLocInfoRec[locNum].split("`");
            if (arrLLAdder.length >= 13) {
                //var latlong = arrLLAdder[11].split(',');
                arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));

                arrPins[locNum] = new Microsoft.Maps.Pushpin(arrPinCenter[locNum], { 
                                        text: arrLLAdder[8] ,
                                        icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
                                        anchor: new Microsoft.Maps.Point(12, 39) 
                                         });

                var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
                // Create the infobox for the pushpin
                //Ricky: Add your infobox as a reference in your pushpin
                arrPins[locNum]. metadata = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
                    {   width: 350,
                        height: 100,
                        title: arrLLAdder[5],
                        description: adder,
                        offset: new Microsoft.Maps.Point(-3,13),
                        visible: false
                    });     

                // Add handler for the pushpin click event.                       
                Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);             
            }
            else {
                console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
            }
        } catch (e) {
            console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
        }
    }

    // Add the Push Pins and InfoBox to the map all at once                         
    //Ricky: Moved this out of the array as you only need to add array of pushpins to the map once.
    if(arrPins.length > 0) {
        map.entities.push(arrPins); //[locNum]
    }   
}
function displayInfobox(e) {
    //map.entities.push(arrPinInfobox);
    console.log("DisplayBox");

    //Get infobox from the pushpin, rather than looping through array.
    var infobox = e.target.metadata;
    infobox.setOptions({ visible: true });

    //for(var i in arrPinInfobox){
        //arrPinInfobox[i].setOptions({ visible: true });
        //arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
        //var infobox = arrPinInfobox[i];
        //infobox.setMap(map);
    //}
}

如果您想进一步清理代码，我建议：

去掉所有的数组，不需要它们。
为图钉使用图层。在层上而不是在每个单独的图钉上添加单击事件。

单击图钉可将它们全部打开

One pushpin click opens them all

bing

bing-maps