Question

来自Bing map V8 official documentation的示例。默认情况下，信息框被假设为虚假，但它首次显示。

            <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
        <script type="text/javascript">
        var map, clusterLayer, infobox;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Bing Map Key'
            });

            //Add an infobox to the map.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
            infobox.setMap(map);

            Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
                //Create a clustering layer
                clusterLayer = new Microsoft.Maps.ClusterLayer(createCustomPushpins(100), {
                    clusteredPinCallback: createCustomClusterPushpins,
                    callback: createPushpinList
                });
                map.layers.insert(clusterLayer);
            });
        }

        function createCustomPushpins(size) {
            //Generate random pushpins within the map bounds.
            var pins = Microsoft.Maps.TestDataGenerator.getPushpins(size, map.getBounds());

            for (var i = 0; i < size; i++) {
                //Create a title for each pushpin.
                pins[i].setOptions({ title: 'Pushpin #' + i });

                //Add handler for the pushpin click event.
                Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
            }

            return pins;
        }

        function createCustomClusterPushpins(cluster) {
            //Create a title for the cluster.
            cluster.setOptions({
                title: 'Cluster of ' + cluster.containedPushpins.length + ' pins'
            });

            //Add handler for the cluster click event.
            Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked);
        }

        function pushpinClicked(e) {
            //Show an infobox when a pushpin is clicked.
            showInfobox(e.target);
        }

        function createPushpinList() {
            //Create a list of displayed pushpins each time clustering layer updates.

            if (clusterLayer != null) {
                infobox.setOptions({ visible: false });

                //Get all pushpins that are currently displayed.
                var data = clusterLayer.getDisplayedPushpins();
                var output = [];

                //Create a list of links for each pushpin that opens up the infobox for it.
                for (var i = 0; i < data.length; i++) {
                    output.push("<a href='javascript:void(0);' onclick='showInfoboxByGridKey(", data[i].gridKey, ");'>");
                    output.push(data[i].getTitle(), "</a><br/>");
                }

                document.getElementById('listOfPins').innerHTML = output.join('');
            }
        }

        function showInfoboxByGridKey(gridKey) {
            //Look up the cluster or pushpin by gridKey.
            var clusterPin = clusterLayer.getClusterPushpinByGridKey(gridKey);

            //Show an infobox for the cluster or pushpin.
            showInfobox(clusterPin);
        }

        function showInfobox(pin) {
            var description = [];

            //Check to see if the pushpin is a cluster.
            if (pin.containedPushpins) {

                //Create a list of all pushpins that are in the cluster.
                description.push('<div style="max-height:75px;overflow-y:auto;"><ul>');
                for (var i = 0; i < pin.containedPushpins.length; i++) {
                    description.push('<li>', pin.containedPushpins[i].getTitle(), '</li>');
                }
                description.push('</ul></div>');
            }

            //Display an infobox for the pushpin.
            infobox.setOptions({
                title: pin.getTitle(),
                location: pin.getLocation(),
                description: description.join(''),
                visible: true
            });
        }
        </script>
    </head>
    <body>
        <div id="myMap" style="position:relative; width:600px; height:400px;"></div>
        <br />
        <div id="listOfPins" style="max-height:250px;width:250px;overflow-y:scroll;"></div>
    </body>
    </html>

根据官方文档，我们必须在实例化信息框对象时传递可见的错误（信息框=新的Microsoft.Maps.Infobox（map.getCenter（），{visible：false}）; ）我出错的任何建议？

Answer 1

奇怪，只是尝试了IE11，Edge，Chrome和Firefox中提供的代码。它在Chrome以外的所有浏览器中都能正常运行。不确定为什么Chrome的行为不同。让团队调查一下。感谢您的报道。

Bing Map V8 Infobox可见无法正常工作

1 个答案: