您的位置：首页 > 其它

鼠标绘制图形

2015-10-10 17:18 337 查看

<!DOCTYPE html>

<html>

<head>

    <title>鼠标绘制点线面</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">

    

<style type="text/css">

html,body{height: 100%;width: 100%;margin: 0;overflow: hidden;font-family: "微软雅黑";}

#allmap{height:500px;width: 100%;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></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/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>

<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

</head>

<body>

    <div id="allmap"></div>

    <input type="button" value="覆盖物个数" onclick="alert(overlays.length)">

    <input type="button" value="删除所有覆盖物" onclick="clearAll();">

</body>

</html>

<script type="text/javascript">

var map=new BMap.Map("allmap");

map.centerAndZoom("天津",12);

map.enableScrollWheelZoom();

var overlays=[];

var overlaycomplete=function(e){overlays.push(e.overlay);};//绘制图形的点都存储在e.overlay下面的一个数组中,将所有的点都存储于overlay数组中

//绘制图形的样式

var styleOptions={

strokeColor:"red",//边线颜色

fillColor:"green",//填充颜色

strokeWeight:3,//边线宽度

strokeOpacity:0.5,//填充透明度，取值为0~1

strokeStyle:'solid'//边线样式，solid(实线)或dashed(虚线)、dotted(点线)

}

//实例化鼠标绘图工具

var drawingManager=new BMapLib.DrawingManager(map,{isOpen:false,enableDrawingTool:true,drawingToolOptinns:{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;

}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航