百度地图实现鼠标绘制多边形并获取所有点坐标

百度地图开放平台http://lbsyun.baidu.com/

这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopular

实现鼠标绘制多边形主要用到百度地图JavaScript开源库鼠标绘制工具条库（http://lbsyun.baidu.com/index.php?title=open/library），提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。且用户可使用JavaScript API对应覆盖物（点、线、面等）类接口对其进行属性（如颜色、线宽等）设置、编辑（如开启线顶点编辑等）等功能。基于Baidu Map API 1.4。

注：JavaScript 开源库不支持极速版JavaScript API。

好了，上面介绍完了，那我们可以开始搞。先看下效果图，

这里绘制了四个坐标点，全部打印出来如下

准备工作，先引入百度地图API文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥需申请"></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" />

html代码

<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">    <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div></div><div id="result"><input type="button" value="获取绘制的覆盖物个数" οnclick="alert(overlays.length)"/><input type="button" value="清除所有覆盖物" οnclick="clearAll()"/></div>

javascript代码

// 百度地图API功能var map = new BMap.Map('map');var poi = new BMap.Point(116.307852,40.057031);map.centerAndZoom(poi, 16);//设置中心点坐标和地图级别map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小//鼠标绘制完成回调方法   获取各个点的经纬度var overlays = [];var overlaycomplete = function(e){overlays.push(e.overlay);var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组for(var i=0;i<path.length;i++){console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat);}};var styleOptions = {strokeColor:"red",    //边线颜色。fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3,       //边线的宽度，以像素为单位。strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。}//实例化鼠标绘制工具var drawingManager = new BMapLib.DrawingManager(map, {isOpen: false, //是否开启绘制模式enableDrawingTool: true, //是否显示工具栏drawingMode:BMAP_DRAWING_POLYGON,//绘制模式  多边形drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_RIGHT, //位置offset: new BMap.Size(5, 5), //偏离值drawingModes:[BMAP_DRAWING_POLYGON]},polygonOptions: styleOptions //多边形的样式});//添加鼠标绘制工具监听事件，用于获取绘制结果drawingManager.addEventListener('overlaycomplete', overlaycomplete);function clearAll() {for(var i = 0; i < overlays.length; i++){map.removeOverlay(overlays[i]);}overlays.length = 0   }

以上鼠标绘制主要用到类BMapLib.DrawingManager，具体参数使用可查看http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html

需要注意的是drawingToolOptions可选参数里面的drawingModes，工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入，如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项，总共有以下五个常量，可根据自己情况选择是否添加显示

BMAP_DRAWING_MARKER 画点
BMAP_DRAWING_CIRCLE 画圆
BMAP_DRAWING_POLYLINE 画线
BMAP_DRAWING_POLYGON 画多边形
BMAP_DRAWING_RECTANGLE 画矩形

在回调overlaycomplete这个地方e.overlay.getPath()返回多边型的点数组Array<Point>，参考类Polygon

http://developer.baidu.com/map/reference/index.php?title=Class:覆盖物类/Polygon

如果知道某个地理位置名称，想要一开始就根据这个地理位置名称去设置中心点坐标，可以通过对地址解析获取经纬度然后再设置中心点坐标

// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint("北京市海淀区上地10街", function(point){if (point) {map.centerAndZoom(point, 16);map.addOverlay(new BMap.Marker(point));}else{alert("您选择地址没有解析到结果!");}}, "北京市");

文章出处：https://www.cnblogs.com/fozero

百度地图实现鼠标绘制多边形并获取所有点坐标相关推荐

百度地图之鼠标绘制工具条库（开源库）
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
百度地图的鼠标绘制工具
 <script type="text/javascript" src="http://api.map.baidu.com ...
百度地图的使用绘制多边形编辑多边形
项目需要手动绘制地图采用了百度首先引入地图给地图一个样式使他充满全屏绘制多边形方法 (只绘制多边形无法绘制圆等图形) 开启绘画工具添加监听方法将描绘的点存在form.path里 ...
百度地图使用折线、多边形覆盖物绘制或编辑行政区域
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
Qt 运用鼠标绘制多边形
文章目录 Qt 鼠标绘制多边形技术要点: 实现过程: Qt 鼠标绘制多边形分析: Qt鼠标绘图,就是要捕获鼠标事件,将捕获到的坐标点传递给场景,然后场景中就可以添加响应的2D图形了. 技术要点: ...
用html制作百度地图,canvas实现百度地图个性化底图绘制
精华 node-canvas实现百度地图个性化底图绘制发布于 3 年前作者 lzxue 11783 次浏览来自技术原文转自 #node-canvas实现百度地图个性化底图绘制随着nodej ...
百度卫星地图无法使用鼠标绘制工具的问题简单解决方案
问题最近手上的一个有关百度地图的bug 具体是这样的: 在街道地图和自定义地图上是没问题的,可以框选提交在地球模式下,没有√×选项,没法提交解决过程首先,我觉得应该不是代码的问题,于是提了相关 ...
百度地图之自定义绘制功能
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 我们可以在地图上绘制各种自定义的图形,包括点.折线.圆.多边形等等,尤其绘制点和折线非常实用,点可以用来标识所 ...

百度地图实现鼠标绘制多边形并获取所有点坐标

百度地图实现鼠标绘制多边形并获取所有点坐标相关推荐

最新文章

热门文章