高德地图测面积

2026-02-17 17:34:43

1、写一个HTML页面,代码如下,首先初始化地图,初始化地图详情可查看另一篇经验,与之前初始化不同的是,这次引入地图的js中得加上鼠标工具,如下

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MouseTool"></script>

高德地图测面积

2、初始化地图后页面显示效果如下

高德地图测面积

3、在js代码块中添加拉框放大方法,代码如下:

function setMeasarea(){ 

var mouseTool = new AMap.MouseTool(map); 

mouseTool.measureArea({

strokeColor:'#DE3535',

fillColor:'#DE3535',

fillOpacity:0.3

});

}

高德地图测面积

4、在HTML中添加按钮

高德地图测面积

5、添加按钮后页面显示效果如下所示

高德地图测面积

6、在按钮上添加点击事件,绑定测面积方法

高德地图测面积

7、这时点击按钮,在地图上就可以点击连线,然后得到一个区域的面积

高德地图测面积

猜你喜欢