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 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 https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#HTML我的代码现在看起来像这样：
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 https://www.bingmapsportal.com/Application我可以在其中创建有效的密钥。使用该密钥解决了问题，现在我可以看到建议的地址表单。