信息框通过地理编码图钉,在打开新信息框之前关闭所有打开的信息框

时间:2021-04-03 14:20:08

标签: bing-maps bing-api

好的,这是我的代码

    const members = [
                {name: 'Abc Ijk',   order: '646545', duration: '1.20h', createdOn: '02/03/2021 09:00 - 10:00', address: '1221 test Avenue Room 112 Portland OR 97204' },
                {name: 'Xyz Opq',   order: '646546', duration: '3.00h', createdOn: '02/03/2021 08:00 - 11:00', address: '945 nw street 852 Portland OR 97209' }
    ];

        function loadEmpStatus() {
            // var navigationBarMode = Microsoft.Maps.NavigationBarMode;
            var map = new Microsoft.Maps.Map(document.getElementById('sdy-fserv-map'), {
                /* No need to set credentials if already passed in URL */
                // navigationBarMode: navigationBarMode.compact,
                // supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial, Microsoft.Maps.MapTypeId.grayscale, Microsoft.Maps.MapTypeId.canvasLight],
                supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial],
                center: new Microsoft.Maps.Location(47.624527, -122.355255),
                maxZoom: 11,
                minZoom: 5
            });

            for( let row of members ) {
                console.log(row);
                doGeocode( map, row );
            }
        }

        function doGeocode( map, data ) {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                var searchManager = new Microsoft.Maps.Search.SearchManager(map);
                var requestOptions = {
                    bounds: map.getBounds(),
                    where: data.address,
                    callback: function (answer, userData) {
                        map.setView({ bounds: answer.results[0].bestView });
                        var pushpin = new Microsoft.Maps.Pushpin(answer.results[0].location, {
                            icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
                        });
                        // map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
                        map.entities.push(pushpin);

                        var infobox = new Microsoft.Maps.Infobox(answer.results[0].location, {
                            title: data.name,
                            description: data.address, visible: false,
                            actions: [
                                { label: 'Handler1', eventHandler: function () { console.log('Handler1'); } },
                                { label: 'Handler2', eventHandler: function () { console.log('Handler2'); } },
                            ]
                        });
                        infobox.setMap(map);
                        Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
                            infobox.setOptions({ visible: true });
                        });
                        map.entities.push(pushpin);/**/
                    }
                };
                searchManager.geocode(requestOptions);
            });
        }

它运行流畅,我有地理编码图钉,附有信息框并且显示效果很好。

enter image description here

但我无法弄清楚如何在图钉点击事件上打开新信息框之前关闭所有打开的信息框。

请帮忙..

1 个答案:

答案 0 :(得分:0)

我强烈建议创建一个单独的信息框并将其重用作本文档中的大纲:https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/infoboxes/multiple-pushpins-and-infoboxes