如何在打開的圖層中添加搜索框 3

Question

我嘗試了一個打開第 3 層的示例，它只添加了一個搜索框但不搜索位置，下面是該代碼 -

<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
      <input type="text" placeholder="place" style="width: 200px">
      <button type="button">Search</button>
    </div>

這是我嘗試過的另一種方法，但它說“地理編碼器未定義”，有人可以建議任何其他方法嗎？

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: 'osm',
  lang: 'pt-BR', //en-US, fr-FR
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});
map.addControl(geocoder);
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';
  overlay.setPosition(coord);
});

Answer 1

看起來你試圖實現 Jonatas Walker 的 Geocoder 插件： https : //github.com/jonataswalker/ol-geocoder （或者在最新版本的 openlayers 中實現了這個？ - 你從哪里得到這個例子？）

在這種情況下，我認為您缺少兩件事：

1) 在你的模板或 index.html 中添加 css 和 javascript 代碼：

<link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>

2）創建一個帳戶並在Mapquest注冊一個密鑰，因為這對這個提供者來說是強制性的，或者嘗試使用另一個不需要密鑰的提供者，比如osm ：

var geocoder = new Geocoder('nominatim', {
  provider: 'osm', //change it here
  lang: 'en-US',
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});

Answer 2

最簡單的方法是使用這個庫， https://github.com/Viglino/ol-ext ，它還帶有大量擴展。

例如搜索框https://viglino.github.io/ol-ext/examples/search/map.control.searchnominatim.html