我正在使用Vue.js和Vuetify框架。 我需要使用带有位置地址字段的表单。 当用户开始键入地名时,该字段必须建议位置地址列表。
最终目标是在Vue js框架中实现以下内容:https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#JS
![enter image description here](https://istack.dev59.com/6DFOf.webp)
<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");
},
});
},