jquery引入高德输入提示,AMap.event.addListener 如何设置选中和回车
时间: 2024-03-11 15:50:50 浏览: 142
jQuery实现给input绑定回车事件的方法
3星 · 编辑精心推荐
要在jquery中引入高德地图输入提示,并设置选中和回车事件,可以按照以下步骤操作:
1. 在HTML文件中引入jquery和高德地图API:
```html
<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文件中添加一个输入框:
```html
<input type="text" id="searchInput">
```
3. 在jQuery中使用高德地图API的`AMap.Autocomplete`类来实现输入提示:
```javascript
$(function() {
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 13,
center: [116.39, 39.9]
});
// 初始化输入提示
var autoComplete = new AMap.Autocomplete({
input: 'searchInput'
});
// 监听选中事件
AMap.event.addListener(autoComplete, 'select', function(e) {
// 获取选中的结果
var result = e.poi;
// 在地图上显示选中的结果
var marker = new AMap.Marker({
position: result.location,
map: map
});
map.setCenter(result.location);
});
// 监听回车事件
$('#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);
});
}
});
});
```
在上面的代码中,我们使用`AMap.event.addListener`方法监听了输入提示的`select`事件,这个事件会在用户选中一个提示结果时触发。我们可以在这个事件处理函数中,获取用户选中的结果,然后在地图上显示出来。
同时,我们也使用`keydown`事件监听输入框中的回车键,如果按下了回车键,就会根据输入框中的值进行搜索。
阅读全文