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

Question

我正在使用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");
      },
    });
    }, 

- HARI NARAYANAN

Answer 1

我找到了解决方法！

我使用了在这里分享的代码片段，现在我的代码看起来像这样：

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，在那里我可以创建一个有效的密钥。使用该密钥解决了问题，现在我可以看到建议地址表单。

- ArthurNipple