高德地图--搜索服务 Autocomplete 和 PlaceSearch

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,关于 layui 和高德地图搜索,你可以按照以下步骤进行: 1. 在高德地图开放平台申请 key,具体可以参考官方文档。 2. 引入高德地图 JavaScript API,在 HTML 页面中添加以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 3. 在 layui 模块中进行搜索操作,可以使用 layui 的 form 模块和 layer 模块。 4. 在搜索框中输入关键词后,调用高德地图搜索服务进行搜索,获取到搜索结果后,可以使用 layui 的 table 模块展示搜索结果。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图搜索示例</title> <link rel="stylesheet" href="https://cdn.layui.com/2.5.7/css/layui.css"> </head> <body> <div class="layui-container" style="margin-top: 20px;"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">关键词</label> <div class="layui-input-inline"> <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">搜索</button> </div> </div> </form> <table class="layui-hide" id="resultTable" lay-filter="resultTable"></table> </div> <script src="https://cdn.layui.com/2.5.7/layui.js"></script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script> // 初始化地图 var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 }); layui.use(['form', 'layer', 'table'], function () { var form = layui.form; var layer = layui.layer; var table = layui.table; // 监听表单提交事件 form.on('submit(search)', function (data) { // 调用高德地图搜索服务 var keyword = data.field.keyword; AMap.service(['AMap.PlaceSearch'], function () { var placeSearch = new AMap.PlaceSearch({ pageSize: 10, pageIndex: 1, city: '全国', map: map, panel: 'resultTable' }); placeSearch.search(keyword); }); return false; }); }); </script> </body> </html> ``` 这个示例代码中,通过 layui 的 form 模块监听表单提交事件,获取到搜索框中的关键词,然后调用高德地图搜索服务进行搜索,并将搜索结果展示在 layui 的 table 模块中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值