带有 bootstrap-vue 输入框的 Mapbox Geocoder - mapbox 的自定义搜索框答案

【问题标题】：Mapbox Geocoder with bootstrap-vue input box - custom search box for mapbox带有 bootstrap-vue 输入框的 Mapbox Geocoder - mapbox 的自定义搜索框
【发布时间】：2020-11-22 05:35:15
【问题描述】：

如何将引导程序与 Mapbox gl Geocoder 一起使用？我正在使用 bootstrap-vue，但我无法让 Geocoder 在输入元素上工作。这是我的代码：

<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>

<script>
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';


export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: SET_ACCESS_TOKEN,
    };
  },
  mounted() {
    mapboxgl.accessToken = this.accessToken;

    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-79.4512, 43.6568],
      zoom: 13,
    });

    var geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
    });

    document.getElementById("geocoder").appendChild(geocoder.onAdd(map));
  },
};
</script>

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

【问题讨论】：

标签： twitter-bootstrap vue.js mapbox mapbox-gl-js bootstrap-vue

【解决方案1】：

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

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

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

【讨论】：