矩形 Rectangle 最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

AMap.Rectangle 对象为用户提供在地图图面绘制矩形覆盖物的能力。

提示

此方法可以通过指定矩形的边界 AMap.Bounds 来快速绘制一个矩形覆盖物。此类为 v1.4.2 新增。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

矩形 Rectangle

创建步骤如下：

创建地图

// 创建地图
var map = new AMap.Map("container", {
  center: [ 116.387175, 39.876405 ], //设置地图初始化中心点位置
  mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
  viewMode: '2D'  //设置地图模式
  zoom: 13   //设置当前地图级别
});

设置矩形范围

// 设置矩形范围
var southWest = new AMap.LngLat(116.356449, 39.859008)
var northEast = new AMap.LngLat(116.417901, 39.893797)

创建矩形 Rectangle 实例

// 创建矩形 Rectangle 实例
var rectangle = new AMap.Rectangle({
  bounds: bounds,
  strokeColor:'red',
  strokeWeight: 6,
  strokeOpacity:0.5,
  strokeDasharray: [30,10],
  // strokeStyle还支持 solid
  strokeStyle: 'dashed',
  fillColor:'blue',
  fillOpacity:0.5,
  cursor:'pointer',
  zIndex:50,
})

矩形 Rectangle 对象添加到 Map

//矩形 Rectangle 对象添加到 Map
map.add(rectangle);
// 缩放地图到合适的视野级别
map.setFitView([ rectangle ])

查看属性和方法