百度地图关键字提示输入

百度地图关键字提示输入

在实际应用中需要根据输入提示获取地址定位,如下图所示
在这里插入图片描述
1、加载 js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图ak"></script>
<div class="layui-form-item">
   <label class="layui-form-label" style="width: 160px">安放地点<span class="layui-badge-dot" style="margin-left: 7px;"></span></label>
    <div class="layui-input-6">
        <input type="text" name="address" id="suggestId" ng-model="field.address" lay-verify="required" placeholder="{:lang('pleaseEnter')}安放地点" class="layui-input">
        <input type="hidden" name="point" id="getPoint">
    </div>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现百度地图关键字检索并自定义结果列表,可以按照以下步骤进行: 1. 引入百度地图 JavaScript API,并加载地图。 2. 在页面中添加一个输入框和一个按钮,用于输入关键字和触发检索。 3. 在按钮的点击事件中,调用百度地图关键字检索服务,传入关键字和检索回调函数。 4. 在检索回调函数中,获取检索结果,并根据需要自定义结果列表。 下面是具体实现步骤: 1. 引入百度地图 JavaScript API,并加载地图。 ```html <!-- 加载百度地图 JavaScript API --> <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <!-- 创建一个地图容器 --> <div id="mapContainer"></div> <script> // 初始化地图 var map = new BMap.Map("mapContainer"); // 设置地图中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); </script> ``` 2. 添加输入框和按钮。 ```html <!-- 添加输入框和按钮 --> <input type="text" id="keywordInput"> <button onclick="search()">搜索</button> ``` 3. 调用百度地图关键字检索服务。 ```javascript function search() { // 获取输入框的值作为关键字 var keyword = document.getElementById("keywordInput").value; // 创建一个关键字检索服务实例 var local = new BMap.LocalSearch(map, { renderOptions: { map: map } }); // 搜索指定关键字 local.search(keyword, function(results) { // 获取检索结果 var pois = results ? results.getPoi(0) : null; // 根据需要自定义结果列表 if (pois) { var name = pois.title; var address = pois.address; var phone = pois.phone; // TODO: 在页面上显示自定义的结果列表 } }); } ``` 在检索回调函数中,我们首先获取检索结果,然后根据需要自定义结果列表。可以将检索结果中的名称、地址、电话等信息显示在页面上,也可以使用自己的样式和布局来展示检索结果。 这样,就可以实现百度地图关键字检索并自定义结果列表的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值