高德 输入提示AMap.PlaceSearch实例
时间: 2023-11-12 21:05:03 浏览: 98
输入框的自动提示实例
5星 · 资源好评率100%
您可以按照以下步骤创建一个高德地图的输入提示实例:
1. 引入高德地图 JavaScript API 的 SDK 文件:
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>
```
2. 创建地图实例:
```javascript
var map = new AMap.Map('container', {
zoom: 10,
center: [116.39, 39.9]
});
```
3. 创建输入提示实例:
```javascript
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
});
AMap.event.addListener(auto, "select", function(e){
// 选择输入提示的结果后,触发此事件,根据选中的结果进行搜索
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);
});
```
在上面的代码中,我们首先创建了一个 `AMap.Autocomplete` 的实例,用于输入提示功能。然后,我们创建了一个 `AMap.PlaceSearch` 的实例,用于地点搜索功能。在输入提示结果被选中后,我们触发 `AMap.PlaceSearch` 的 `search` 方法,根据选中的结果进行搜索。
注意:在上述代码中,`tipinput` 是用于输入提示的文本框的 id,您需要根据实际情况修改。同时,您还需要将 `您的key值` 替换为您申请的高德地图 API 的 key 值。
阅读全文