开发 地图 JS API 2.0 进阶教程 服务插件和工具 鼠标工具拉框缩放

拉框缩放 AMap.MouseTool 最后更新时间: 2023年03月23日

使用MouseTool可实现放大/缩小选中地图区域效果,用于区域缩放等场景。

准备

成为开发者并创建 key

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

拉框缩放 AMap.MouseTool

使用方式如下:

1

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});
2

创建MouseTool实例

var mouseTool = new AMap.MouseTool(map)
3

放大

mouseTool.rectZoomIn({
  strokeColor:'#80d8ff',
  fillColor:'#80d8ff',
  fillOpacity:0.3
  //同 Polygon 的 Option 设置

});
4

缩小

mouseTool.rectZoomOut({
  strokeColor:'#80d8ff',
  fillColor:'#80d8ff',
  fillOpacity:0.3
  //同 Polygon 的 Option 设置
});

返回顶部 示例中心 常见问题 智能客服 公众号
二维码