JS实现 高德地图 多边形绘制 测量面积并截图
时间: 2024-06-08 22:12:01 浏览: 8
实现这个功能需要以下步骤:
1. 引入高德地图的 JavaScript API。
2. 创建地图实例,指定地图容器和地图的级别。
```javascript
var map = new AMap.Map('mapContainer', {
zoom: 13
});
```
3. 添加多边形绘制工具,并监听绘制完成事件。
```javascript
var polygon;
var drawPolygon = new AMap.PolygonEditor(map);
drawPolygon.on('draw', function(event) {
polygon = event.obj;
// 计算多边形面积
var area = polygon.getArea();
console.log('面积:' + area + '平方米');
});
```
4. 添加截图插件,并监听截图完成事件。
```javascript
var snapshot = new AMap.plugin(['AMap.Snapshot'], function() {
map.on('complete', function() {
snapshot.takeSnapshot(map, function(dataURL) {
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
});
});
});
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图多边形绘制和截图</title>
<style type="text/css">
#mapContainer {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('mapContainer', {
zoom: 13
});
var polygon;
var drawPolygon = new AMap.PolygonEditor(map);
drawPolygon.on('draw', function(event) {
polygon = event.obj;
var area = polygon.getArea();
console.log('面积:' + area + '平方米');
});
var snapshot = new AMap.plugin(['AMap.Snapshot'], function() {
map.on('complete', function() {
snapshot.takeSnapshot(map, function(dataURL) {
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
});
});
});
</script>
</body>
</html>
```
注意:在使用高德地图 API 时,需要替换 key 值。另外,截图插件只能在 Web 端使用,不能在移动端使用。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)