AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/13 12:06
简介

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

提供的鼠标绘制工具
  • 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

下一篇

点聚合

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