Bing Maps：ウェブページ上の2つのマップ

同じWebページに2つのBingマップを表示しようとしていますが、私のコードは2番目のマップ（下のコードを参照）のみを表示しています。Bing Maps：ウェブページ上の2つのマップ

私はすでに非同期（<body>の末尾にあるスクリプト）とsync（<head>のスクリプト）オプションを試してみましたが、同じエラーが発生しています。

これを修正する方法はありますか？感謝します！同じ名前の2つの方法を持っているためである

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

同じ名前の関数が複数ある場合、最後に定義されている関数は他の関数より優先されます。

あなたはスクリプトコールバックで両方のマップを作成することができます1つの関数にあなたのコードをマージすることができます両方のマップが同一の座標とNavigationBarMode Sを使用しているので、あなたが複製する必要はありません

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

<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

。

function loadMapScenario

第1の関数定義は、第2の関数定義で上書きされます。

問題を処理するか、両方のスニペットを1つの関数内に含める必要がある2番目の関数の名前を変更します。

出典

2017-02-13 21:43:12

ありがとう、私はそれを固定しました。 – Camilo

Bing Maps：ウェブページ上の2つのマップ

答えて

関連する問題