1、创建地图容器
在mounted中初始化地图、鼠标绘制工具和添加鼠标监听事件
vue data中添加地图和绘制工具对象
2、添加初始化化地图方法
initMap(longitude, latitude) {let that = thisthat.map = new BMapGL.Map("container");// 创建地图实例if (longitude == null || latitude == null) {var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放this.drawInit()return}},new BMapGL.Map("container"); 中存放div容器的id名
var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放放入点坐标，centerAndZoom(point, 16)中16为地图等级，越大地图越精细，最大为18
3、初始化鼠标绘制工具
// 实例化鼠标绘制工具drawInit() {this.drawingManager = new BMapGLLib.DrawingManager(this.map, {// isOpen: true, // 是否开启绘制模式enableCalculate: false, // 绘制是否进行测距测面enableSorption: true, // 是否开启边界吸附功能sorptiondistance: 20, // 边界吸附距离labelOptions: this.labelOptions, // label样式});},this.drawingManager = new BMapGLLib.DrawingManager(this.map, {}），this.map就是你自己初始化的地图名
4、添加鼠标监听事件
//鼠标监听事件getEventListener() {// 添加鼠标绘制监听事件this.drawingManager.addEventListener('overlaycomplete', (e, instance) => {var marker = e.overlay;this.inputForm.latitude = marker.getPosition().latthis.inputForm.longitude = marker.getPosition().lngconsole.log(this.inputForm)//关闭绘制this.downDraw();// 计算标记数量this.markerCount = 1;});}, var marker = e.overlay; //获取到merker类型的对象
this.inputForm.latitude = marker.getPosition().lat //获取对象内的参数
this.inputForm.longitude = marker.getPosition().lng
5、调用绘制方法，开始绘制
//开始绘制draw(e) {if (this.markerCount != 0) {this.$message('标记点只能唯一');return}// 进行绘制this.drawingManager.setDrawingMode(e);this.drawingManager.open();},6、绘制后调用的结束方法
//关闭绘制downDraw() {this.drawingManager.close();}我这里有点业务，点坐标只能添加一次，所以在添加坐标的监听方法里添加了坐标数量的上限。
以下是完整代码
<style type="text/css">#container {height: 800px;width: 100%;}
</style>
<script type="text/javascript"src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1V4mSproiau7AxsArSNKBWqR0ZiyMKNh&s=1"
></script>
<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript"src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
<body>
<div id="app" v-cloak><div><el-button id="marker" @click="draw('marker')">点</el-button><el-button @click="">点完了</el-button></div><div id="container"></div>
</div>
</body>
<script>var tableContainer = new Vue({el: '#app',mixins: [sharpMixin],data() {return {inputForm: {id: '',latitude: '',longitude: ''},drawingManager: null,map: null,labelOptions: {borderRadius: '2px',background: '#FFFBCC',border: '1px solid #E1E1E1',color: '#703A04',fontSize: '12px',letterSpacing: '0',padding: '5px'},markerCount: 0}},mounted() {this.initMap();this.getEventListener()},created() {},methods: {// 获取数据列表refreshList() {this.get('${ctx}/basicinfo/operateBuilding/getBuildProjectInfoById').then((res) => {this.inputForm.latitude = res.data.latitudethis.inputForm.longitude = res.data.longitudethis.initMap(this.inputForm.longitude, this.inputForm.latitude)})},initMap(longitude, latitude) {let that = thisthat.map = new BMapGL.Map("container");// 创建地图实例if (longitude == null || latitude == null) {var point = new BMapGL.Point(111.1480354849708, 37.5262978563336);that.map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放this.drawInit()return}},// 实例化鼠标绘制工具drawInit() {this.drawingManager = new BMapGLLib.DrawingManager(this.map, {// isOpen: true, // 是否开启绘制模式enableCalculate: false, // 绘制是否进行测距测面enableSorption: true, // 是否开启边界吸附功能sorptiondistance: 20, // 边界吸附距离labelOptions: this.labelOptions, // label样式});},//鼠标监听事件getEventListener() {// 添加鼠标绘制监听事件this.drawingManager.addEventListener('overlaycomplete', (e, instance) => {var marker = e.overlay;this.inputForm.latitude = marker.getPosition().latthis.inputForm.longitude = marker.getPosition().lng//关闭绘制this.downDraw();// 计算标记数量this.markerCount = 1;});},//开始绘制draw(e) {if (this.markerCount != 0) {this.$message('标记点只能唯一');return}// 进行绘制this.drawingManager.setDrawingMode(e);this.drawingManager.open();},//关闭绘制downDraw() {this.drawingManager.close();}}})
</script>
</html>
