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>

这是我尝试过的另一种方法，但是它说“ geocoder未定义”，有人可以建议其他任何方法吗？

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

如何在打开的图层中添加搜索框3

2 个答案: