高德地图web实现搜索
时间: 2024-02-23 19:31:01 浏览: 222
要在高德地图 Web 中实现搜索功能,可以使用高德地图 JavaScript API 中的 AMap.PlaceSearch 类。以下是一个基本的示例:
首先需要引入高德地图 JavaScript API 的库文件:
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
```
然后在 JavaScript 中创建地图,并实例化 AMap.PlaceSearch 类:
```javascript
var map = new AMap.Map('map-container', {
zoom: 13,
center: [116.397428, 39.90923]
});
var placeSearch = new AMap.PlaceSearch({
map: map
});
```
接下来,可以使用 AMap.PlaceSearch 类的 search 方法进行搜索:
```javascript
placeSearch.search('餐厅', function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// 处理搜索结果
}
});
```
在这个例子中,我们搜索“餐厅”,当搜索完成时,会调用回调函数处理搜索结果。在回调函数中,可以使用 AMap.PlaceSearch 类的 getInfo 和 getPoi 方法获取搜索结果的详细信息和 POI 信息。
完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图搜索示例</title>
<style type="text/css">
#map-container {
width: 100%;
height: 500px;
}
</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript">
var map = new AMap.Map('map-container', {
zoom: 13,
center: [116.397428, 39.90923]
});
var placeSearch = new AMap.PlaceSearch({
map: map
});
placeSearch.search('餐厅', function(status, result) {
if (status === 'complete' && result.info === 'OK') {
var poiList = result.poiList;
for (var i = 0; i < poiList.length; i++) {
var poi = poiList[i];
var info = placeSearch.getInfo(i);
console.log(info);
}
}
});
</script>
</body>
</html>
```
注意:在使用高德地图 JavaScript API 之前,需要先申请一个开发者账号,并申请一个 API key。在代码中的 `key` 参数中,需要替换为自己申请的 API key。
阅读全文