高德 输入提示实例 绑定点击事件和回车事件
时间: 2024-03-16 14:45:08 浏览: 171
高德地图点聚合,点聚合点击事件,单点点击事件
以下是一个绑定点击事件和回车事件的高德输入提示实例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高德输入提示</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="https://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/css/base.css">
<style>
#tip {
position: absolute;
top: 10px;
left: 10px;
z-index: 9999;
}
</style>
</head>
<body>
<input id="keyword" type="text" placeholder="请输入关键字">
<div id="tip"></div>
<script>
var keyword = document.getElementById('keyword');
var tip = document.getElementById('tip');
var auto = new AMap.Autocomplete({
input: keyword,
city: '全国'
});
AMap.event.addListener(auto, 'select', function(e) {
var poi = e.poi;
tip.innerHTML = poi.name + ' ' + poi.address;
});
keyword.addEventListener('keydown', function(e) {
if (e.keyCode === 13) { // 判断按下的是回车键
var keywords = keyword.value;
AMap.plugin('AMap.Autocomplete', function() {
var auto = new AMap.Autocomplete({
input: 'keyword'
});
AMap.event.addListener(auto, 'select', function(e) {
var poi = e.poi;
tip.innerHTML = poi.name + ' ' + poi.address;
});
auto.search(keywords); // 根据输入值查询
});
}
});
</script>
</body>
</html>
```
在这个示例中,我们先创建了一个 `AMap.Autocomplete` 对象,用于实现输入提示功能。然后,我们通过 `AMap.event.addListener` 方法,为 `select` 事件绑定了一个回调函数,当用户点击某一个提示项时,就会触发该事件,回调函数中会获取到对应的 `poi` 数据,并在页面上显示出来。
同时,我们也为输入框绑定了一个 `keydown` 事件,当用户按下回车键时,就会触发该事件,回调函数中会根据输入值进行查询,并将查询结果显示在页面上。注意,在查询结果中,我们也需要为每一个结果项绑定点击事件,以实现点击后显示详细信息的功能。
阅读全文