1、创建地图容器
在mounted中初始化地图、鼠标绘制工具和添加鼠标监听事件
vue data中添加地图和绘制工具对象
2、添加初始化化地图方法
initMap(longitude, latitude) {
let that = this
that.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().lat
this.inputForm.longitude = marker.getPosition().lng
console.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.latitude
this.inputForm.longitude = res.data.longitude
this.initMap(this.inputForm.longitude, this.inputForm.latitude)
})
},
initMap(longitude, latitude) {
let that = this
that.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().lat
this.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>
