百度地图apijs绘制多边形使⽤⽅法
1.引⼊接⼝
<script src="api.map.baidu/api?v=2.0&ak=你的key"></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="api.map.baidu/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="api.map.baidu/library/DrawingManager/1.4/src/DrawingManager_min.css" />
2.给dom绑定id
<a class="start_draw">绘制区域</a>
<div id="map"></div>
3.编写js
var map = new BMap.Map("map",{enableMapClick:false});
var center = new BMap.Point(106.554413,29.557184);
map.addControl(new BMap.NavigationControl()); //向地图中添加缩放控件
map.addControl(new BMap.ScaleControl());  //向地图中添加⽐例尺控件
var overlays=[];
var polygon;//多边形覆盖物
var overlaycomplete = function(e){
overlays=[];
overlays.push(e.overlay.ia);
console.log(e);
};
var styleOptions = {
strokeColor:"red",    //边线颜⾊。
fillColor:"red",      //填充颜⾊。当参数为空时，圆形将没有填充效果。
strokeWeight: 3,      //边线的宽度，以像素为单位。
strokeOpacity: 0.8,    //边线透明度，取值范围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', function(e){
var point = Path(),arr1 = [];
point.forEach(function(d){
arr1.push(new BMap.Point(d.lng,d.lat)); //获得区域数组
});
polygon = new BMap.Polygon(arr1); //画出区域
});
$(".start_drow").click(function(){//开启区域绘制状态
drawingManager.open();
drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//画多边形});
$(".exit_drow").click(function(){//退出区域绘制状态
百度api接口
drawingManager.close();
});
polygon.disableEditing();//关闭多边形编辑状态
//开启图形编辑后，当图形改变时触发
polygon.addEventListener("lineupdate",function (e) {
var point = Path(),arr2 = [];
point.forEach(function(d){
arr2.push([d.lng,d.lat]);
});
position = JSON.stringify(arr2);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。