Bing地图：网页上的两个地图

我试图在同一个网页上显示两个Bing地图，但是我的代码仅显示第二个地图（请参阅下面的代码）。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>

来源

2017-02-13 Camilo

如果您有多个具有相同名称的函数，则要定义的最后一个函数将覆盖其他函数。

您可以在一个功能，这将允许您创建脚本回调都映射合并代码：由于这两种地图是使用相同的坐标

<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>

和NavigationBarMode是你不需要复制这些变量可以节省几行：

<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>

来源

2017-02-13 21:43:55 Turnip

非常感谢，我修好了。 – Camilo

那是因为你有2种方法具有相同的名称。

function loadMapScenario

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

更改第二个函数的名称，该函数应该处理该问题或将这两个片段包含在单个函数中。

来源

2017-02-13 21:43:12

非常感谢，我修复了它。 – Camilo

Bing地图：网页上的两个地图

回答

相关问题