使用高德地图api写一个用js代码,要求用多边形画框通过调用我自己的接口进行搜索房源的代码
时间: 2024-04-22 20:23:25 浏览: 15
好的,以下是一个使用高德地图 API 和 JavaScript 代码的示例,可以让用户用多边形框选择一个区域,然后调用您自己的接口来搜索该区域内的房源:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索房源</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key"></script>
</head>
<body>
<div id="mapContainer" style="height: 500px;"></div>
<div>
<button id="searchButton">搜索房源</button>
<div id="resultContainer"></div>
</div>
<script>
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 13,
center: [116.397428, 39.90923]
});
// 初始化多边形绘制工具
var polygonDrawer = new AMap.PolygonEditor(map);
// 监听多边形绘制完成事件
AMap.event.addListener(polygonDrawer, 'draw', function(event) {
// 获取多边形边界路径
var bounds = event.obj.getPath();
// 使用多边形边界路径来搜索房源
var xhr = new XMLHttpRequest();
var url = 'https://your-api.com/house-info';
var params = {
bounds: bounds.toString(),
apiKey: 'your-api-key'
};
var query = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
xhr.open('GET', url + '?' + query);
xhr.onload = function() {
if (xhr.status === 200) {
var houseInfo = JSON.parse(xhr.responseText);
// 在这里处理房源信息,例如:
var resultContainer = document.getElementById('resultContainer');
resultContainer.innerHTML = '';
for (var i = 0; i < houseInfo.length; i++) {
var house = houseInfo[i];
var houseName = house.name;
var housePrice = house.price;
var div = document.createElement('div');
div.innerHTML = '名称:' + houseName + ',价格:' + housePrice;
resultContainer.appendChild(div);
}
} else {
console.error('Failed to get house info');
}
};
xhr.send();
});
// 监听搜索按钮点击事件
var searchButton = document.getElementById('searchButton');
searchButton.addEventListener('click', function() {
polygonDrawer.open();
});
</script>
</body>
</html>
```
在这个示例中,我们首先初始化了一个地图并在地图上添加了一个多边形绘制工具。然后,我们监听了多边形绘制完成事件,并在事件回调函数中获取多边形的边界路径。接下来,我们使用多边形的边界路径来调用您自己的接口,搜索该区域内的房源,并将搜索结果显示在一个 HTML 元素中(在这个示例中为 `resultContainer`)。
请注意,这个示例只是一个基本的框架,您需要根据您的具体需求来修改和适应代码。例如,您可能需要添加一些控件来帮助用户绘制多边形,或者使用其他地图 API 功能来搜索房源。