小单---->大牛 2017-06-14 07:36 采纳率: 0%
浏览 1626

百度地图 我想输入框内容直接搜索，不想点击检索到的内容在搜索

百度地图 我想输入框内容直接搜索，不想点击检索到的内容在搜索

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-06 00:08
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要实现这个功能，您可以使用百度地图的API。以下是一个简单的示例，展示了如何将文本输入框设置为直接搜索而不是点击。

    首先，请确保您已经安装了百度地图开发工具，并且已经获取到了您的应用ID和秘钥。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图直接搜索</title>
<style>
  .search-box {
    position: relative;
    width: 300px;
    height: 40px;
    padding-left: 25px;
    margin-right: auto;
    margin-bottom: 10px;
  }
  
  .search-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease-in-out;
  }

  .search-input:focus {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
  }

  .search-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #ff0000;
  }

  .search-result {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #f2f2f2;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
  }

  .search-result p {
    margin: 0;
    padding: 10px 20px;
  }
</style>
<script src="https://api.map.baidu.com/api?v=2.0&ak=<YOUR_API_KEY>&callback=bmap_search"></script>
</head>
<body>

<div class="search-box">
  <input type="text" id="searchInput" class="search-input" placeholder="请输入搜索关键词...">
  <button onclick="bmap_search()">搜索</button>
</div>

<script>
function bmap_search() {
  var input = document.getElementById("searchInput");
  var searchUrl = "http://t{s}&q=";
  var searchText = input.value;
  window.location.href = searchUrl + searchText;
}
</script>

</body>
</html>

    在这个例子中，我们创建了一个包含一个文本输入框和一个按钮的简单页面。当用户点击搜索按钮时，它会调用bmap_search()函数并传递给它的参数是当前页面上的文本输入框的值。

    注意：这只是一个基本的例子，实际的使用可能需要根据你的具体需求进行调整，例如处理多关键字搜索、添加错误处理等。此外，你需要替换 <YOUR_API_KEY> 为你自己的百度地图 API 密钥。

    评论

报告相同问题？

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境