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 Maps中的所有形状都具有为您的自定义数据保留的元数据属性。还注意到你多次向地图添加图钉数组，这将导致问题。以下是对您的代码的建议更改，我在// 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);
    //}
}

如果您想要清理代码，我建议：

摆脱所有数组，没有必要。
为图钉使用图层。在图层上添加单击事件，而不是在每个单独的图钉上添加。

一个图钉点击打开它们

1 个答案: