如何在打开的图层中添加搜索框 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