未捕获的类型错误：无法读取未定义的属性“authenticateClientAndRetrieveSessionId”

问题描述

我将 Vue.js 与 Vuetify 框架一起使用。我需要使用带有位置地址字段的表单。当用户开始输入地名时，该字段必须建议位置地址列表。

最终目标是在 Vue js 框架上实现如下所示：https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#JS

 <template>
 <v-app>
    <div id="searchBoxContainer">
      <v-text-field
        id="searchBox"
        v-model="startlocation"
        label="Start Location"
        prepend-inner-icon="mdi-map-marker"
        outlined
        rounded
        dense
      ></v-text-field>
    </div>
  </v-app>
</template>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[bing-map apikey]'></script>

 MetaInfo () {
      return {
        script: [{
          src: `https://www.bing.com/api/maps/mapcontrol?key=[bing_map apikey]`,async: true,defer: true,callback: () => this.loadMapScenario() // will declare it in methods
        }]
      }
    },methods: {
    loadMapScenario() {
       Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest",{
      callback: () => {
        var options = { maxResults: 5 };
        var manager = new Microsoft.Maps.AutosuggestManager(options);
        manager.attachAutosuggest("#searchBox","#searchBoxContainer");
      },});
    },

解决方法

我找到了解决方法！

我使用了共享的代码段 here，现在我的代码如下所示：

function GetMap() {
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest',{
                    callback: onLoad,errorCallback: onError
                });
                function onLoad() {
                    var options = { maxResults: 5 };
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#search_78','#header-search',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;
                }
                
            }

返回我的页面后，错误发生了变化，它说我的凭据无效，并将我重定向到 https://www.bingmapsportal.com/Application，我可以在其中创建有效的密钥。使用该键解决了问题，现在我可以看到建议的地址表单。