jquery 引入高德地图搜索提示,如何设置回车事件
时间: 2024-03-11 19:50:41 浏览: 78
vue 项目软键盘回车触发搜索事件
要在jquery中引入高德地图搜索提示,并设置回车事件,可以按照以下步骤操作:
1. 在HTML文件中引入jquery和高德地图API:
```
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=yourKey"></script>
```
其中,`yourKey`需要替换成你自己的高德地图API key。
2. 在HTML文件中添加一个输入框和一个搜索按钮:
```
<input type="text" id="searchInput">
<button id="searchBtn">搜索</button>
```
3. 在jQuery中使用高德地图API的`AMap.Autocomplete`类来实现搜索提示:
```
$(function() {
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 13,
center: [116.39, 39.9]
});
// 初始化搜索提示
var autoComplete = new AMap.Autocomplete({
input: 'searchInput'
});
// 设置回车事件
$('#searchInput').on('keydown', function(e) {
if (e.keyCode == 13) {
// 获取输入框中的值
var keyword = $('#searchInput').val();
// 根据关键字搜索
AMap.service(['AMap.PlaceSearch'], function() {
var placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
city: '全国'
});
placeSearch.search(keyword);
});
}
});
// 点击搜索按钮时搜索
$('#searchBtn').on('click', function() {
// 获取输入框中的值
var keyword = $('#searchInput').val();
// 根据关键字搜索
AMap.service(['AMap.PlaceSearch'], function() {
var placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
city: '全国'
});
placeSearch.search(keyword);
});
});
});
```
在上面的代码中,我们使用`keydown`事件监听输入框中的回车键,如果按下了回车键,就会根据输入框中的值进行搜索。同时,我们也为搜索按钮添加了点击事件,以便用户点击按钮进行搜索。
阅读全文