百度地图 利用测距工具动态画多边形Polygon

chinahgf

地图的基础代码不述
有一个应用：用户需要在地图上动态画多边形区域，并在区域上做一个操作。此处只讲述怎么画多边形区域。
看过一些网上资料，发现画多边形Polygon的小工具操作很是不便，也不够美观，多画几个点线一大堆，还有一个工具画到最后不知道如何结束。如下图


 
刚发现通过测距工具可以直观、方便的画出自已想要的任何多边形，代码如下：
导入测距工具类
<!-- 测距工具类 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
 
   /**
      * ==============================================================
      * 利用测距LIB包来画多边形
      * 当测距画线结束时，沿着画线轨迹画出多边形
      * @ Genfa.H
      */

     //折线包含所有点的数组
    var points = [];
    //利用测距LIB包来画多边形
    var myDis = new BMapLib.DistanceTool(map);

    //画线结束时触发的事件
    myDis.addEventListener("drawend", function(e) {
    });

    //每次点击底图添加节点时触发的事件
    myDis.addEventListener("addpoint", function(e) {
        points.push(new BMap.Point(e.point.lng,e.point.lat));
    });

    //点击线段上最后一个节点旁的关闭按钮时触发的事件
    myDis.addEventListener("removepolyline", function(e) {
       
        //创建多边形
        var secRingPolygon = new BMap.Polygon(points, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
        //添加多边形到地图上
        map.addOverlay(secRingPolygon);

        //当鼠标进入多边形区域时会触发此事件
        secRingPolygon.addEventListener("mouseover",function(){
            secRingPolygon.setStrokeColor("red");
            map.addOverlay(secRingLabel);
        });
        //给多边形添加鼠标"移动"事件
        secRingPolygon.addEventListener("mousemove",function(event){
            secRingLabel.setPosition(event.point);
        });

        //鼠标离开多边形时触发此事件。
        secRingPolygon.addEventListener("mouseout",function(){
            secRingPolygon.setStrokeColor("blue");
            map.removeOverlay(secRingLabel);
        });

        //点击多边形后会触发此事件。
        secRingPolygon.addEventListener("click",function(){
            map.zoomIn();
            secRingPolygon.setStrokeColor("red");
        });


        //创建多边形标签
        var secRingLabel = new BMap.Label("<b>XXXXLabelTitle</b>，XXXXXXXXXLabelContents",{offset: new BMap.Size(10,-10)});
        secRingLabel.setStyle({"z-index":"999999", "padding": "10px","width": "140px","border": "1px solid #ccff00"});
       

        //初始化多边形坐标，为下一次画多边形坐准备
        points = [];
    });
    //==========================================================================
 
相关的说明代码中都有注释，效果如下


 


如果觉得测距工具画线时带的路程提示无用，可以通过相关参数去改变。