将绘制的实践从 select 的 onchange 换到一个 button 的点击上,也就是选好一个 图形,点击绘制按钮,然后在地图上绘制图形。
时间: 2024-06-08 14:08:50 浏览: 15
好的,这可以通过以下步骤实现:
1. 首先,在 HTML 页面上添加一个 button 元素和一个用于显示地图的 div 元素。
```
<button onclick="drawShape()">绘制图形</button>
<div id="map"></div>
```
2. 在 JavaScript 中定义一个 drawShape 函数,该函数将获取用户选择的图形类型,并在地图上绘制相应的图形。
```
function drawShape() {
// 获取用户选择的图形类型
var shapeType = document.getElementById("shape-select").value;
// 根据图形类型在地图上绘制图形
switch(shapeType) {
case "circle":
// 绘制圆形
break;
case "rectangle":
// 绘制矩形
break;
case "polygon":
// 绘制多边形
break;
default:
// 没有选择任何图形
}
}
```
3. 在每个图形绘制函数中,使用地图 API 来创建相应的图形对象并添加到地图上。
```
// 绘制圆形
function drawCircle() {
// 获取圆心坐标和半径
var center = map.getCenter();
var radius = 1000; // 假设半径为 1000 米
// 创建圆形对象
var circle = new BMap.Circle(center, radius);
// 添加到地图上
map.addOverlay(circle);
}
// 绘制矩形
function drawRectangle() {
// 获取矩形的左上角和右下角坐标
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
// 创建矩形对象
var rectangle = new BMap.Rectangle(new BMap.Bounds(sw, ne));
// 添加到地图上
map.addOverlay(rectangle);
}
// 绘制多边形
function drawPolygon() {
// 获取多边形的各个顶点坐标
var points = [
new BMap.Point(116.403981,39.915101),
new BMap.Point(116.402071,39.913501),
new BMap.Point(116.401981,39.916101)
];
// 创建多边形对象
var polygon = new BMap.Polygon(points);
// 添加到地图上
map.addOverlay(polygon);
}
```
4. 最后,将 select 元素改为以下形式,让用户选择图形后需要点击按钮才能绘制图形。
```
<select id="shape-select">
<option value="">请选择图形</option>
<option value="circle">圆形</option>
<option value="rectangle">矩形</option>
<option value="polygon">多边形</option>
</select>
```