带搜索栏的百度地图-H5-搜索

最新推荐文章于 2024-09-18 15:12:56 发布

大闸蛙

最新推荐文章于 2024-09-18 15:12:56 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：百度地图

本文链接：https://blog.youkuaiyun.com/crabfrog/article/details/84645089

本文介绍了如何在H5页面中集成百度地图，并添加搜索功能。通过HTML、CSS和JavaScript代码实现地图展示和搜索框交互，展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

在这里插入图片描述

HTML

                <div class="contact-map-wrapper">
                    <div id="allmap" class="contact-map"></div>
                    <div id="r-result"><input type="text" id="suggestId" size="20" value="百度" placeholder="搜地点、查公交、找路线" /></div>
                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </div>

CSS

.contact-map-wrapper{
  position: relative;  
  width: 100%;
  height: 582px;
}
.contact-map{
    height: 100%;
    width: 100%;
}
.contact-map-wrapper #r-result {
    position: absolute;
    top: 0;
    left: 0;
    margin: 16px;
    height: 30px;
    width: 280px;
}
.contact-map-wrapper #r-result input{