如何为手机添加自定义搜索

Question

我想对我的移动网站进行自定义搜索。通过搜索那里的名字，这将在我的家人的房子上显示标记。

我有一个经度和经度列表，并带有家人的名字。

我正在尝试使用开放层地图，还尝试了一些教程，但是它们没有向我展示如何进行自定义搜索。给我建议一种制作方法。

http://openlayersbook.github.io/ch11-creating-web-map-apps/example-11.html 在本教程中，搜索栏会显示，但不会在我的手机中显示地图。

Answer 1

如果要以响应方式使用搜索控件，则必须使用目标选项将其放置在响应div中：

map.addControl( new SearchControl({
  ...
  target: elementDiv
}

然后使用CSS媒体查询根据设备大小将其放置在正确的位置。

这里是一个示例：https://2x1pq0pz9n.codesandbox.io/

按下搜索按钮并调整窗口大小以查看其反应：

• 肖像：搜索位于屏幕底部
• 风景：搜索位于屏幕的左侧
• 小（智能手机）：使用全屏搜索

代码在这里：https://codesandbox.io/s/2x1pq0pz9n

正如Mike所说，您还必须在标题中添加一个元视口。