Bing Maps V8 Web 控件和 CommonJS答案

【问题标题】：Bing Maps V8 Web Control and CommonJSBing Maps V8 Web 控件和 CommonJS
【发布时间】：2016-11-10 18:11:25
【问题描述】：

我在 Web 应用程序中使用 Bing Maps V8 Web Control。我还使用早午餐来管理静态资产，包括 JavaScript。默认情况下，Brunch 将所有非供应商 JavaScript 代码包装在 CommonJS 模块中。

Microsoft 的文档说要在脚本导入 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 包装的函数？

【问题讨论】：

标签： javascript bing-maps commonjs brunch

【解决方案1】：

查看以下代码存在的问题：

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script> 在这一行中定义了一个回调函数loadMapScenario，但它不存在。
地图函数仅在包含必应地图库 js 后调用。

解决方案

bing maps 提供了一个示例代码。见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>

【讨论】：

如您所见，我实际上正在使用该示例代码。问题是我试图将 JS 代码提取到单独的文件中，而不是使用<script> 将其嵌入到 HTML 中。通过返回 Google 地图，我实际上已经“修复”了这个问题。 Bing 并没有提供我需要的所有信息——他们的数据中没有填充邮政编码字段。我发现一个论坛帖子指出，实际上进行完整的数据集成并不是他们的优先事项。好的。保持优雅，微软。