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地圖：網頁上的兩個地圖

回答

相關問題