vue中引入百度地图，并添加点线面，标注信息

vue引入百度地图

1.首先在public文件夹下得index.html文件中的head里面通过src引入百度api文件

<script type="text/javascript" src="https://api.map.baidu.***/api?v=1.0&type=webgl&ak=您的密钥"></script>
<link href="https://mapopen.cdn.bcebos.***/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.***/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.***/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>

2.在需要用到百度地图的页面准备一个container容器，用来初始化地图

<div class="container" id="container" ref="containers">

3.在js里面写入初始化代码函数，并在mounted函数中进行回调

methods:{
   
   
    //初始化地图方法
	createBDmap() {
   
   
            var map = new BMapGL.Map("container", {
   
    enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
            map.centerAndZoom(new BMapGL.Point(114.xxx, 34.xxx), 15); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            this.map = map
        },
}
mounted(){
   
   
	//页面渲染时回调执行
	this.createBDmap()
}

vue在百度地图中渲染点，线，面

1.添加一个点

	addMarker(data) {
   
    //date表示传进来的数据，包括坐标、图标、文字等信息
            let _this = this
            // this.addLabel(data)
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //自定义方法，对坐标进行过滤，弄成百度需要的格式。
            var myIcon = new BMapGL.Icon(data.iconUrl, new BMapGL.Size(25, 25)); //定义点位图标的样式大小，url地址，如不设置自动使用默认百度点样式