好的，关于 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 模块中。
1896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
