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

拉框缩放 AMap.MouseTool 最后更新时间: 2024年02月26日

本文介绍如何使用AMap.MouseTool鼠标工具插件来实现选中地图区域后进行放大/缩小操作,以达到区域缩放的效果。

鼠标拉框缩放示例

1、拉框缩放 AMap.MouseTool

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

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

1.3 创建 MouseTool 实例

本例使用异步安装插件。通过AMap.plugin方法按需引入插件,在plugin回调之后使用插件功能。插件引入方式 插件的使用

AMap.plugin("AMap.MouseTool", function () {
  var mouseTool = new AMap.MouseTool(map); //创建鼠标工具插件实例
});
4

1.4 放大

//在回调函数中使用插件功能
mouseTool.rectZoomIn({
  strokeColor: "#80d8ff",
  fillColor: "#80d8ff",
  fillOpacity: 0.3,
  //同 Polygon 的 Option 设置
});
5

1.5 缩小

//在回调函数中使用插件功能
mouseTool.rectZoomOut({
  strokeColor: "#80d8ff",
  fillColor: "#80d8ff",
  fillOpacity: 0.3,
  //同 Polygon 的 Option 设置
});
6

1.6 关闭拉框缩放

//在回调函数中使用插件功能
mouseTool.close();
提示

mouseTool.close(ifClear)方法用于关闭鼠标工具。ifClear参数可缺省(默认为false)。设为true时,关闭工具并清除地图上通过鼠标工具编辑绘制的所有覆盖物对象;设为false时,仅关闭工具,保留覆盖物。

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