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

问题描述

我将 Vue.js 与 Vuetify 框架一起使用.我需要使用带有位置地址字段的表单.当用户开始输入地名时，该字段必须建议位置地址列表.最终目标是在 Vue js 框架上实现如下所示:https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#JS

I'm using the Vue.js with Vuetify framework. I need to use a form with a location address field. That field has to suggest the list of location addresses, when the user starts typing in the place name.The end goal is to achieve as shown here on Vue js framework: 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>

</v-app></模板><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");
      },
    });
    },

推荐答案

我找到了解决方案！

我使用了在此处 我的代码现在看起来像这样:

I used the snippet that was shared here and my code now looks like this:

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

After going back to my page, the error changed and it said that my credentials were invalid, and it redirected me to https://www.bingmapsportal.com/Application where I could create a valid key. Using that key fixed the problem and now I can see the suggested addresses form.

这篇关于未捕获的类型错误:无法读取未定义的属性“authenticateClientAndRetrieveSessionId"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！