以高德地图api 用js写话多边形框找房
时间: 2024-01-26 12:34:31 浏览: 79
类似链家的地图找房,js实现
首先,您需要获取高德地图API的key,然后在网页中引入高德地图API的JS文件。接下来,您可以按照以下步骤来使用高德地图API实现多边形框找房:
1. 创建一个地图实例
```
var map = new AMap.Map('container', {
zoom: 13,
center: [116.39, 39.9]
});
```
其中,'container'为地图容器的ID,zoom为地图缩放级别,center为地图中心点的经纬度坐标。
2. 绘制多边形
```
var polygon = new AMap.Polygon({
map: map,
path: [[116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365]],
strokeColor: "#FF33FF",
strokeOpacity: 0.2,
strokeWeight: 3,
fillColor: "#1791fc",
fillOpacity: 0.35
});
```
其中,path为多边形的坐标数组,strokeColor为边框颜色,strokeOpacity为边框透明度,strokeWeight为边框宽度,fillColor为填充颜色,fillOpacity为填充透明度。
3. 添加搜索框
```
var searchBox = new AMap.PlaceSearch({
city: '北京',
map: map
});
searchBox.search('写字楼');
```
其中,city为搜索的城市,map为地图实例,search为搜索的关键词。
4. 监听多边形的变化事件
```
AMap.event.addListener(polygon, 'change', function() {
var bounds = polygon.getBounds();
searchBox.setBounds(bounds);
});
```
当多边形的形状发生变化时,获取多边形的边界,并将搜索框的范围设置为多边形的边界。
通过以上步骤,您就可以使用高德地图API实现多边形框找房的功能了。
阅读全文