鼠标绘制点线面
编辑时间:2017-09-03

山西福彩快乐十分 www.x78jx.cn 0.jpg

以上效果完整HTML+JS代码示例:

<!DOCTYPE html>
<
html>
<
head>
<
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<
title>百度离线地图鼠标绘制点线面示例</title>
<
style type="text/css">
        body
, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:
100%;height:100%;}
</style>
<!--
引入核心js文件 -->
<
script type="text/javascript" src="js/apiv.2.0.js"></script>
<!--
加载鼠标绘制工具-->
<
script type="text/javascript" src="js/DrawingManager_min.js"></script>
<
link rel="stylesheet" href="css/DrawingManager_min.css" />
</head>
<
body>
<
div id="allmap"></div>
</body>
</html>
<
script type="text/javascript">
       
// 创建Map实例
    
map = new BMap.Map("allmap");
       
// 设置地图背景色为白色
    
map.getContainer().style.background = '#FFF';
       
var point = new BMap.Point(104.074362,36.540276);
       
// 显示地图
    
map.centerAndZoom(point, 5);
       
//-------显示卫星地图----
       
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));

       
map.enableScrollWheelZoom();
       
var overlays = [];
        
var overlaycomplete = function(e){
        overlays.push(e.overlay)
;
       
};
       
var styleOptions = {
        strokeColor:
"red",    //边线颜色。
       
fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。
       
strokeWeight: 3,       //边线的宽度,以像素为单位。
        
strokeOpacity: 0.8,       //边线透明度,取值范围0 - 1。
       
fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。
       
strokeStyle: 'solid' //边线的样式,soliddashed。
       
}
       
//实例化鼠标绘制工具
    
var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen:
false, //是否开启绘制模式
      
enableDrawingTool: true, //是否显示工具栏
      
enableCalculate: true, //开启测量面积、距离
    
 drawingToolOptions: {
             anchor: BMAP_ANCHOR_TOP_LEFT
, //位置
        
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>
获取正版授权

方式一:自动授权

关注官方微信号
BIGEMAP微信公众号
操作步骤:
①关注官方微信号
②点击【自助授权】
③按提示完成操作!
注:此功能暂未完成

方式二:点击加入

免费授权QQ群

QQ在线咨询在线客服

免费咨询电话

400-028-7262

山西福彩快乐十分

淘宝店铺

bigemap.taobao.com

联系我们
  • 老火靓汤一天中何时喝最好? 2019-04-17
  • 陈晓卿推出全新美食纪录片 "风味"能否再续辉煌? 2019-04-17
  • 詹皇通知骑士队 准备与其续约 2019-04-11
  • 张瑜的专栏作者中国国家地理网 2019-04-10
  • 尧都农商银行全力推进服务“三农”工作 2019-04-09
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-04-09
  • 台花莲发生6.5级地震已致2人遇难 2019-03-28
  • 谋求共同发展的强大动力(钟声) 2019-03-17
  • 广州整治校外培训机构:禁止超纲教学等行为 2019-03-17
  • 金参考|民粹政府上台 意大利会成为欧元区下一个风险点吗? 2018-09-04
  • 美媒:“打不死的”墨西哥蝾螈濒临灭绝 2018-09-04
  • 朝美领导人签署联合声明  确定半岛无核和平目标 2018-07-25
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2018-07-24
  • 《刺客信条:奥德赛》将持续提供定期内容更新 2018-07-24
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2018-07-23
  • 29| 865| 747| 858| 313| 303| 592| 468| 376| 780|