高德地图api js画圈找房
时间: 2023-08-14 15:30:40 浏览: 102
您可以使用高德地图 JavaScript API 的圆形覆盖物来绘制圆形,同时结合地图搜索 API 实现找房功能。以下是一个简单的示例代码:
```
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 13, // 地图缩放级别
center: [116.397428, 39.90923] // 地图中心点坐标
});
// 绘制圆形
var circle = new AMap.Circle({
center: [116.397428, 39.90923], // 圆心坐标
radius: 1000, // 半径(单位:米)
strokeColor: "#FF33FF", // 线颜色
strokeOpacity: 0.8, // 线透明度
strokeWeight: 2, // 线粗细度
fillColor: "#1791fc", // 填充颜色
fillOpacity: 0.35 // 填充透明度
});
circle.setMap(map);
// 地图搜索 API 搜索房源
var search = function() {
var keyword = document.getElementById('keywordInput').value;
var bounds = circle.getBounds(); // 获取圆形覆盖物的边界
var southwest = bounds.getSouthWest(); // 获取边界的左下角坐标
var northeast = bounds.getNorthEast(); // 获取边界的右上角坐标
var searchOptions = {
keywords: keyword,
city: '全国',
bounds: new AMap.Bounds(southwest, northeast)
};
AMap.plugin('AMap.PlaceSearch', function() {
var placeSearch = new AMap.PlaceSearch(searchOptions);
placeSearch.search();
});
};
```
其中,`map` 为地图实例,`circle` 为圆形覆盖物实例。您可以在 HTML 页面中添加一个文本框和一个按钮,用户输入搜索关键词后点击按钮即可触发 `search` 函数搜索房源。同时,您也可以根据需求调整圆形覆盖物的样式和搜索条件。
阅读全文