Это выглядит так, когда это должна быть кнопка, которую вы нажимаете, чтобы открыть. Я использую реактивную листовку с листовкой-геокодером mapzen.
import { MapControl } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet-geocoder-mapzen'
export default class SearchBox extends MapControl {
componentWillMount() {
const searchBox = L.control.geocoder(<API-KEY>)
this.leafletElement = searchBox
}
}
Я добавил некоторые стили в свой CSS, чтобы окно поиска выглядело несколько лучше — по крайней мере, это мое исправление на данный момент.
.leaflet-touch .leaflet-bar {
background-color: white;
}
.leaflet-pelias-control, .leaflet-pelias-input {
width: 100%;
max-width: 200px;
}
.leaflet-pelias-search-icon {
display: block;
visibility: hidden;
}
.leaflet-pelias-close {
visibility: hidden;
}
.leaflet-pelias-close::after {
content:'Clear search';
visibility: visible;
display: block;
width: 100%;
padding: 5px;
top: 2px;
}
.leaflet-top, .leaflet-left {
width: 200px;
}
Для leaflet-control-geocoder мне помогло добавить в index.css следующее:
@import "~leaflet-control-geocoder/dist/Control.Geocoder.css";
Итак, я предполагаю, что для leaflet-geocoder-mapzen (не проверено):
@import "~leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css";
или похожие
к вашему сведению
Тильда (~), используемая в сочетании с веб-пакетом, означает, что для определения пути выполняется поиск по node_modules. см. объяснение stackoverflow здесь
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.css">- person generalpiston schedule 29.12.2016