2016-11-10 134 views
1

我在Web應用程序中使用Bing Maps V8 Web控件。我還使用Brunch來管理靜態資產,包括JavaScript。默認情況下,Brunch將所有非供應商的JavaScript代碼包裝在CommonJS模塊中。Bing地圖V8 Web控件和CommonJS

微軟的文檔說來初始化腳本輸入URL回調參數的控制,如:

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

有了這樣定義的loadMapScenario

Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', { 
    callback: onLoad, 
    errorCallback: onError, 
    credentials: 'Your Bing Maps Key' 
}); 
function onLoad() { 
    var options = { maxResults: 5 }; 
    var manager = new Microsoft.Maps.AutosuggestManager(options); 
    manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion); 
} 
function onError(message) { 
    document.getElementById('printoutPanel').innerHTML = message; 
} 
function selectedSuggestion(suggestionResult) { 
    document.getElementById('printoutPanel').innerHTML = 
     'Suggestion: ' + suggestionResult.formattedSuggestion + 
      '<br> Lat: ' + suggestionResult.location.latitude + 
      '<br> Lon: ' + suggestionResult.location.longitude; 
} 

的問題是,我從API中獲得一個錯誤,說明回調函數無效。

有沒有更好的方法來做到這一點?有沒有一種方法讓Web控件以這種方式調用CommonJS包裝的函數?

回答

0

看到問題與下面的代碼:

  1. <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>在這條線的回調函數loadMapScenario定義,但它不是存在。

  2. 地圖函數只有在包含bing地圖庫js後纔會調用。

有由Bing地圖提供的樣本代碼。請參閱http://www.bing.com/api/maps/sdk/mapcontrol/isdk#autoSuggestUiWithoutMap+HTML

如果您無法看到上述鏈接,請參閱下面的代碼。只需使用您的bing map api連接即可。此處提供的示例代碼是自動提示,無需加載地圖。您可以在上面的鏈接中看到不同的選項。

<!DOCTYPE html> 
<html> 
<head> 
    <title>autoSuggestUiWithoutMapHTML</title> 
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
</head> 
<body> 
    <div id='printoutPanel'></div> 
    <div id='searchBoxContainer'><input type= 'text' id= 'searchBox'/></div> 

    <div id='myMap' style='width: 100vw; height: 100vh;'></div> 
    <script type='text/javascript'> 
     function loadMapScenario() { 
      Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', { 
       callback: onLoad, 
       errorCallback: onError, 
       credentials: 'Your Bing Maps Key' 
      }); 
      function onLoad() { 
       var options = { maxResults: 5 }; 
       var manager = new Microsoft.Maps.AutosuggestManager(options); 
       manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion); 
      } 
      function onError(message) { 
       document.getElementById('printoutPanel').innerHTML = message; 
      } 
      function selectedSuggestion(suggestionResult) { 
       document.getElementById('printoutPanel').innerHTML = 
        'Suggestion: ' + suggestionResult.formattedSuggestion + 
         '<br> Lat: ' + suggestionResult.location.latitude + 
         '<br> Lon: ' + suggestionResult.location.longitude; 
      } 

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

+0

正如你所看到的,我確實使用了精確的示例代碼。問題是我試圖將JS代碼提取到一個單獨的文件中,而不是用'