Bing Maps V8 Web 控件和 CommonJS

Question

我在 Web 应用程序中使用 Bing Maps V8 Web 控件。我也在使用 Brunch 来管理静态资产，包括 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 封装的函数？

Answer 1

在下面查看您的代码的问题：

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

解决方案

bing 地图提供了示例代码。参见 http://www.bing.com/api/maps/sdk/mapcontrol/isdk#autoSuggestUiWithoutMap+HTML

如果您看不到上面的内容 link 那么请看下面的代码。只需使用您的 bing 地图 api 键即可连接。这里提供的示例代码是不加载地图的自动建议。你可以在上面看到不同的选项link。

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

Bing Maps V8 Web 控件和 CommonJS

Bing Maps V8 Web Control and CommonJS

javascript

bing-maps

commonjs

brunch