一, 首先是定位.
先定义 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); // 画完后清除所画对象
- }
来源: http://www.bubuko.com/infodetail-3170821.html