react-leaflet中的搜索框看起来错误

Question

​

​

当它应该是一个按钮时，它看起来像你按下打开的按钮。我正在使用react-leaflet和mapzen的leaflet geocoder。

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

Answer 1

我在我的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;
}

Answer 2

对于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";

或类似的

仅供参考

波浪号(~)与webpack一起使用，表示对node_modules执行查找以解析路径。请参阅stackoverflow explanation here