Question

我正在尝试为此地图创建搜索框和按钮，有人可以帮助我如何将搜索框连接到地图吗？

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <form class="example" action="/" style="margin:auto;max-width:300px">
    <input type="text" placeholder="Search.." name="search2">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>

  <div class="mapouter">
    <div class="gmap_canvas">
      <iframe
        width="600" height="500" id="gmap_canvas"
        src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
      </iframe>
      <a href="https://www.embedgooglemap.net">embedgooglemap.net</a></div>
    <style>
      .mapouter {
        text-align: right;
        height: 500px;
        width: 600px;
      }

      .gmap_canvas {
        overflow: hidden;
        background: none !important;
        height: 500px;
        width: 600px;
      }
    </style>
  </div>
</body>

</html>

Answer 1

这可以通过Vanilla JavaScript轻松完成。

在您的html上，绑定onkeyup事件

  <input type="text" onkeyup="search()" id="search-input" placeholder="Search.." name="search2">

在您的JavaScript文件上

function search() { 
  const input = document.getElementById('search-input');
  console.log(input)
}

连接地图搜索框

1 个答案: