我如何添加移动自定义搜索

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/

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

• portrait：搜索位于屏幕的底部
• landscape：搜索位于屏幕的左侧
• 小（智能手机）：搜索使用全屏

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

正如迈克所说，你还必须在标题中添加元视口。