一,首先是定位。先定义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效果如下图所示:至此,如何在百度地图中画圆、画矩形、画多边形,并且判断坐标点是否在圆内、矩形内的功能就已经完成了。 ————————————————
转载于:https://www.cnblogs.com/xu1115/p/11412760.html
相关资源:JAVA上百实例源码以及开源项目