Bing 地图：网页上有两张地图

Question

我试图在同一个网页上显示两个 Bing 地图，但是我的代码只显示第二个地图（见下面的代码）。

我已经尝试使用异步（<body> 末尾的脚本）和同步（<head> 内的脚本）选项，但我遇到了同样的错误。

知道如何解决吗？点赞！

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id='printoutPanel'></div>
    <h1>Map 1: </h1>
    <div id='myMap' style='width: 30vw; height: 30vh;'></div>

    <h1>Map 2:</h1>
    <div id='myMap2' style='width: 30vw; height: 30vh;'></div>


    <script type='text/javascript'>
        function loadMapScenario() {
            var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

            var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
            var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'My Bing Maps Key',
                navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
                center: loc1,
                zoom: 16,
            });
        }
    </script>

    <script type='text/javascript'>
        function loadMapScenario() {
            var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

            var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
            var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
                credentials: 'My Bing Maps Key',
                navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                center: loc2,
                zoom: 16,
            });
        }
    </script>

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

</body>

Answer 1

那是因为你有 2 个方法同名。

function loadMapScenario

第一个函数定义将被第二个函数定义覆盖。

更改第二个函数的名称，这应该可以解决问题或将两个代码段都包含在一个函数中。

Answer 2

如果您有多个同名函数，最后定义的函数将覆盖其他函数。

您可以将您的代码合并到一个函数中，这样您就可以在脚本回调中创建两个地图：

<script>
    function loadMapScenario() {
        var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
        var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
            center: loc1,
            zoom: 16,
        });

        var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
        var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            center: loc2,
            zoom: 16,
        });
    }
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

由于两张地图都使用相同的坐标和 NavigationBarModes，因此您无需复制这些变量，这样可以节省几行代码：

<script>
    function loadMapScenario() {
        var loc = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode = Microsoft.Maps.NavigationBarMode;

        var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode.compact, 
            center: loc1,
            zoom: 16,
        });

        var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode.compact, // use 'navigationBarMode' instead of 'navigationBarMode2'
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            center: loc, // use 'loc' instead of 'loc2'
            zoom: 16,
        });
    }
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

Bing 地图：网页上有两张地图

Bing Maps: Two Maps on webpage

html

javascript

bing-maps

bing-api