百度瓦片绘制地图，实现画圆、矩形以及多边形并获取图形的中心点

一，首先是定位。

先定义6个百度坐标点，然后在坐标点上创建对应的marker，再通过map.addOverlay(marker)方法将6个marker定位在百度地图中，并利用marker.disableMassClear()方法设置marker为不可被清除，最后为marker添加鼠标滑过事件。具体如下：

    // 初始化百度地图
    var map = new BMap.Map('map');
    map.centerAndZoom(new BMap.Point(116.3875773621, 39.9156402091), 6);   //初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();   //开启鼠标滚轮缩放

    //被定位在地图中的6个点
    var locPoints = [
           new BMap.Point(108.574138248194, 34.197235684692),
           new BMap.Point(108.683296262141, 33.877960833917),
           new BMap.Point(108.518062680055, 38.057251109697),
           new BMap.Point(108.546627635172, 38.312875770488),
           new BMap.Point(109.151927017928, 34.686473580787),
           new BMap.Point(108.411427712714, 33.266286514603)
       ];

    //将6个点定位在地图中
    locPoints.forEach(function(value) {
       var locMarkers;
       locMarkers = new BMap.Marker(value);

       map.addOverlay(locMarkers);       //将标注添加到地图中

       locMarkers.disableMassClear();   //设置marker不可被清除

       locMarkers.addEventListener("mouseover",function (e) {
           openDataInfo(value, e);
       });
    });

    //鼠标滑过marker事件
    function openDataInfo(result, e) {
       var carOpts = {
               width : 200,     // 信息窗口宽度
               height: 120,     // 信息窗口高度
               title : "<b>设备信息</b>" , // 信息窗口标题
               enableMessage:true   //设置允许信息窗发送短息
           };

       var p = e.target;

       var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

       carContent = '<br/><table><thead>'+
           '<tr><th><label>快速操作：</label><a οnclick="showOrderTrackDiv()"><span style="color:#478FCA; margin-left:15px;">轨迹回放</span></a></th></tr></thead><tbody>'+
           '<tr><td>经度：'+p.getPosition().lng+'</td></tr><tr><td>纬度：'+p.getPosition().lat+'</td></tr>'+
           '</tbody></table></div>';

       var infoWindow = new BMap.InfoWindow(carContent, carOpts); // 创建信息窗口对象
       map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    //轨迹回放函数
    function showOrderTrackDiv(){
       alert("轨迹回放函数");
    }

二，画圆、矩形、多边形

首先得包含百度地图鼠标绘制工具的css和js，如下：

    
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

然后定义一个绘制样式，并实例化鼠标绘制工具，最后为鼠标绘制工具添加鼠标绘制完成后的回调方法。具体如下：

    var styleOptions = {
       strokeColor:"black",    //边线颜色。
       fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
       strokeWeight: 3,       //边线的宽度，以像素为单位。
       strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。
       fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
       strokeStyle: 'solid' //边线的样式，solid或dashed。
    }

    //实例化鼠标绘制工具
    var myDrawingManagerObject = 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 //矩形的样式
    });

     //添加鼠标绘制工具监听事件，用于获取绘制结果
    myDrawingManagerObject.addEventListener('overlaycomplete', overlaycomplete);

三，判断点是否在圆内或矩形内

在鼠标绘制完成的回调方法中，利用BMapLib.GeoUtils.isPointInCircle(point, circleObject)判断点是否在圆内，或者利用BMapLib.GeoUtils.isPointInPolygon(point, polygonObject)判断点是否在矩形内。

在利用isPointInCircle或isPointInPolygon方法时，需在页面中包含GeoUtils_min.js。如下：

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

具体如下：

    function overlaycomplete(e){

       var cirCount = 0;
       var polyCount = 0;

       myDrawingManagerObject.close();       //关闭画图

       var drawingModeType = e.drawingMode;   //获取所画图形类型

       locPoints.forEach(function(value) {
           if (drawingModeType == "circle") {
               //圆
               if(BMapLib.GeoUtils.isPointInCircle(value, e.overlay)) {
                   cirCount++;
               }
           } else if (drawingModeType == "rectangle" || drawingModeType == "polygon") {
               //矩形或多边形
               if(BMapLib.GeoUtils.isPointInPolygon(value, e.overlay)) {
                   polyCount++;
               }
           }
       });

       alert("圆中包含"+cirCount+"个定位点，多边形或矩形中包含"+polyCount+"个定位点。");

       map.removeOverlay(e.overlay);   //画完后清除所画对象
    }

最终效果如下图所示：

鼠标滑过marker效果如下图所示：

至此，如何在百度地图中画圆、画矩形、画多边形，并且判断坐标点是否在圆内、矩形内的功能就已经完成了。
————————————————