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

Posted 2023-03-25

【中文标题】未捕获的类型错误：无法读取未定义的属性“authenticateClientAndRetrieveSessionId”

【英文标题】：Uncaught TypeError: Cannot read property 'authenticateClientAndRetrieveSessionId' of undefined

【发布时间】：2021-05-27 12:10:47

【问题描述】：

我正在使用带有 Vuetify 框架的 Vue.js。我需要使用带有位置地址字段的表单。当用户开始输入地名时，该字段必须建议位置地址列表。 最终目标是在 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");
      ,
    );
    , 

【参考方案1】：

我找到了解决办法！

我使用了here 共享的 sn-p，我的代码现在看起来像这样：

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