Twitter bootstrap 带有引导vue输入框的Mapbox地理编码器-Mapbox的自定义搜索框

如何将引导程序与一起使用？我正在使用bootstrap vue，但我无法使地理编码器在输入元素上工作。这是我的密码：

<template>
  <b-container>
    <div id="map"></div>
    <div>
        <b-form-input
          id="geocoder"
          class="geocoder"
          v-model="query"
          type="search"
          placeholder="Enter your location"
        ></b-form-input>
      </div>

  </b-container>
</template>

从“mapbox gl”导入mapboxgl；
从“@mapbox/mapbox gl geocoder”导入MapboxGeocoder；
导入“@mapbox/mapbox gl geocoder/dist/mapbox gl geocoder.css”；
导出默认值{
名称：“基本地图”，
数据（）{
返回{
accessToken:SET_ACCESS_TOKEN，
};
},
安装的（）{
mapboxgl.accessToken=this.accessToken；
var map=new mapboxgl.map({
容器：“地图”，
样式：“mapbox://styles/mapbox/streets-v11",
中间：[-79.4512,43.6568]，
缩放：13，
});
var geocoder=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
mapboxgl:mapboxgl，
});
document.getElementById（“地理编码器”）.appendChild（geocoder.onAdd（map））；
},
};

---

构建自定义搜索框的最佳方法是什么？

是否要根据外观构建自定义搜索框？您可以使用CSS类更改外观。在文档中，您可以看到可用的内容

这里有一些我用过的课程。您可以设置搜索栏和结果的样式

.mapboxgl-ctrl-geocoder
.mapboxgl-ctrl-geocoder > div
.geocoder-dropdown-item
.geocoder-dropdown-icon
.geocoder-dropdown-text

.mapboxgl-ctrl-geocoder
.mapboxgl-ctrl-geocoder > div
.geocoder-dropdown-item
.geocoder-dropdown-icon
.geocoder-dropdown-text