AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
简介

本节介绍如何利用鼠标在地图上绘制的功能。

提供的鼠标绘制工具
  • DrawingManager:鼠标绘制工具。通过此工具用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积。详情可见开源库

鼠标绘制过程
1. 在页面的头部应用鼠标绘制工具开源库的文件
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
2. 在代码中实例化鼠标绘制工具
var styleOptions = {
strokeColor: "red", // 边线颜色。
fillColor: "red", // 填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, // 边线的宽度,以像素为单位。
strokeOpacity: 0.8, // 边线透明度,取值范围0 - 1。
fillOpacity: 0.6, // 填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' // 边线的样式,solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, // 是否开启绘制模式
enableDrawingTool: true, // 是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
offset: new BMap.Size(5, 5), // 偏离值
},
circleOptions: styleOptions, // 圆的样式
polylineOptions: styleOptions, // 线的样式
polygonOptions: styleOptions, // 多边形的样式
rectangleOptions: styleOptions // 矩形的样式
});

上一篇

MapV

下一篇

点聚合
本篇文章对您是否有帮助?