DrawingManager_min.js_MapDrawingManager资源-CSDN文库

共3个文件

css：1个

html：1个

js：1个

3星 · 超过75%的资源需积分: 48 23 浏览量 2019-02-12 15:34:51 上传评论收藏 10KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

DrawingManager_min.zip （3个子文件）

map

DrawingManager_min.js 16KB

DrawingManager_min.css 1KB

index.html 10KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body, html, #allmap { font-family: "微软雅黑"; height: 100%; margin: 0; overflow: hidden; width: 100%; } .cont{ position: absolute; top:50px; left: 50px; width: 288px;padding:0 10px; background: #ffffff; overflow: hidden; line-height: 40px; box-shadow:0px 2px 5px #D9D9D9, 1px 2px 5px #333333; } .cont span{ width: 100%; display: block; position: relative; border-bottom: 1px solid #d6d7dc; font-size: 14px; } .cont span p{ width:40px; height: 30px; display: block; margin: 0px; position: absolute; top: 0px; right: 0px; cursor: pointer; } .contin{ line-height: 30px; height: 200px; overflow-x: hidden; overflow-y: scroll; padding-bottom: 20px;} .items{ width: 100%; overflow: hidden; border-bottom: 1px solid #d6d7dc; } .item{ width:282px; float: left; height: 30px; line-height: 30px; margin: 5px; text-align: center; color: #ffffff; } .item span{ width:86px; float: left; height: 30px; line-height: 30px; text-align: center; cursor: pointer; background:#3c7cd5; color: #ffffff; font-size: 12px; } .item p{ width:50px; float: right;margin: 3px 0; height: 25px; border-radius: 5px; font-size: 13px; line-height: 25px; text-align: center; cursor: pointer; color: #3c7cd5; border: 1px solid #d6d7dc; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=b6MPDAQdZRz5R62Z9XqH55pHG5vdmF7m"></script>  <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" />  <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> </head> <body> <div id="allmap" style="overflow: hidden; position: relative; zoom: 1;"> <div id="map" style="-webkit-transition: all 0.5s ease-in-out; height: 100%; transition: all 0.5s ease-in-out;"></div> </div>   <div class="cont" id="J-cont" style="display:none;"> <span >搜索结果: <p onclick="exit()" drawingtype="hander">关闭</p></span> <div class="items"> <div class="item"><span>保安人员</span><p >群发</p></div>  </div> <div class="contin" id="J-items"> </div> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map"); var point = new BMap.Point(113.323685, 23.130522); map.centerAndZoom(point, 15); //map.centerAndZoom(point, 8); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // 编写自定义函数,创建标注 function addMarker(point, id,address,SecurityName) { var marker = new BMap.Marker(point); map.addOverlay(marker); addClickHandler("<p>编号：" + id+"</p>"+"<p>地址："+ address+"</p>"+"<p>名字："+ SecurityName+"</p>", marker); } var opts = { width: 100, // 信息窗口宽度 height: 140, // 信息窗口高度 title: "信息窗口", // 信息窗口标题 enableMessage: false //设置允许信息窗发送短息 }; function addClickHandler(content, marker) { marker.addEventListener("click", function (e) { openInfo(content, e); } ); } function openInfo(content, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口 } // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); var allPointArray = []; var markers = []; //点击标注显示的数据 var securityName=[["王思"],["赵思"],["钱思"],["孙思"],["周思"],["吴思"],["郑思"],["冯思"],["陈思"],["楚思"]]; var address=[["福州晋安区"],["福州晋安区1"],["福州晋安区2"],["福州晋安区3"],["福州晋安区4"],["福州晋安区5"],["福州晋安区6"],["福州晋安区7"],["福州晋安区8"],["福州晋安区9"]]; for (var i = 0; i < 10; i++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); // alert(securityName[i]); allPointArray.push({ Point: point, Id: i,Address:address[i],SecurityName:securityName[i] }); addMarker(point, i,address[i],securityName[i]);//添加标注数据 } //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 //var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers }); var overlays = []; var overlaycomplete = function (e) { clearAll(); overlays.push(e.overlay); e.overlay.enableEditing(); e.overlay.addEventListener("lineupdate", function (e) { showLatLon(e.currentTarget); }); var pointArray = e.overlay.getPath(); // map.setViewport(pointArray); //调整视野 getOverlayPath(); document.getElementById("J-cont").style.display='block'; }; var styleOptions = { strokeColor: "blue", //边线颜色。 fillColor: "blue", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 2, //边线的宽度，以像素为单位。 strokeOpacity: 0.5, //边线透明度，取值范围0 - 1。 fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 }; //实例化鼠标绘制工具 var drawingManager = 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 //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for (var i = 0; i < overlays.length; i++) { map.removeOverlay(overlays[i]); } overlays.length = 0;

评论收藏

内容反馈