vue 百度地图绘制点线面

vue使用百度地图
1、在index.html 中直接引用

2、在页面中使用地图

在methods中获取地图信息

handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      setTimeout(() => {
        var point = new BMap.Point(117, 36.73) // 初始地图中心位置
        map.centerAndZoom(point, 10) // 地图初始化的缩放低等
        map.enableScrollWheelZoom(true) // 是否能滚轮缩放
        map.setMapStyle({ styleJson: mapStyleJson }) // 地图自定义样式  个性地图编辑平台 https://lbsyun.baidu.com/apiconsole/custommap       import mapStyleJson from \'./custom_map_config.json\'   个性化地图样式的引入
        var bdary = new BMap.Boundary()
         // 获取行政区域
        bdary.get(\'济南市\', function (rs) {
          let count = rs.boundaries.length // 行政区域的点有多少个
          for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 3, // 描边的宽度
              strokeColor: \'#3080e6\',
              fillColor: \'#091d59\',
              strokeOpacity: 0
            }) // 建立多边形覆盖物
            map.addOverlay(ply) // 添加覆盖物
          }
        })
      }, 300)
      // 缩放监听
      this.map.addEventListener(\'zoomend\', function (e) {
        // let zoom= map.getZoom(); // 获取缩放级别
      })
      // 拖拽监听
      this.map.addEventListener(\'dragstart\', function (evt) {
      })
      setTimeout(() => {
       	// 绘制icon
       	this.addMark()
      }, 100)
    },

addMark(data) {
      let _this = this
      data.forEach(item => {
        var width = \'18\'
        var height = \'21\'
       	var icon = \'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAVCAYAAABLy77vAAACqklEQVQ4jZWUz08TURDHP9t2S7cFaosQE6CKBeQEKoknJWjkqkZCVDiYqAf/AK8esEf/BPRkPGA4oomaGEnURBONUQ9qFKPGICItQn/utn1mll1YKhj9Ji/73ndmvjtvZna1uckkm+AwcBo4AiQc8xfgATDpPDegVkgO14DBzdQ9eAhcAD66lM9jPAg8/QcRHJ9nTswGoW5gGmj6BxEXcSdmj1foOhD9DxEXEjPhCh31phiIdtG4f9zeN/an7LPN9V9xuHEC0W6v2CFpiggNu4xSEEycJNw5hhVoIZw8g9523F7h5ChlfQfh5Bh6+zHb14MR/6WR+FWgWTirAvquUYor31HGbiwzR8UXoRqIUcrOo4wOLDOL8kUofL2Df71VUdm2uqeipVEq+yiZkM4sYVV0sjnTXrIXTmxFs0LJ0rwZJUTIcE/lClhmkXhbH68e3aCl4wBL6Tl7yV44sRVyv+zsPdBkIGeBDuEWVzSaBiZsp+ziLA3NXVhmwXYPBsMsL7ynYXsSP2Uyjy8Sr18r1CfJaMYrXcj+JBSOUVyZR1UrFJYXsArLBEMNFLM/qDMaKeUztWMwI0JTXsbMp2lO9PH5zT3aewYpmzkKOYd7fZfmxD5K+XSt0JRcTcSeA3szOY2333xkshp1urJrpuyx0Ox2CydFjtUrelqrxCL21V4C/QGgCpwHnuh+6hoNhaZBSFeYZbcziqpa5YoWNIQUun/1Ak5sVYQYShkv7l8uDIeC6lZbE+FKVeHToFozdS4n8xMKqjxwyold//qHUsbtgI+BaFi9k25siyi7K97lcuIjvkMpY3rtJd43DqUMqVUvcFZaWltRYN6x9Tq+a9jqDynolLq5n49TD/lzCvcHNmRUgw/ACUdA2nNuKxGBXey/QAJFYCdwc0s/4DcqGAYY22jLsgAAAABJRU5ErkJggg==\'
        if (item.lng && item.lat && item.type) {
          let marker = new window.BMap.Marker(
            new window.BMap.Point(item.lng, item.lat),
            {
              icon: new window.BMap.Icon(
                icon,
                new window.BMap.Size(width, height)
              )
            }
          )
          // 增加标识属性
          marker.customData = {
            ...item,
            iconType: 1
          }
          _this.map.addOverlay(marker)
          // 监听地图点击时间
          _this.map.addEventListener(\'click\', function (e) {
          })
          // 监听icon点击时间
          marker.addEventListener(\'click\', function (e) {
          })
        }
      })
    },

其他类型标志

// 添加文本标注
  var opts = {
    position: new window.BMap.Point(this.lineList[index].lng, this.lineList[index].lat), // 指定文本标注所在的地理位置
    offset: new window.BMap.Size(0, 0) // 设置文本偏移量
  }
let distance = \'直线距离：\' + _this.calMeter(this.lineList[index - 1], this.lineList[index])
var label = new window.BMap.Label(distance, opts)
label.setStyle({
  // 给label设置样式，任意的CSS都是可以的
  color: \'#f8d642\', // 颜色
  fontSize: \'14px\',
  border: \'0\',
  height: \'auto\',
  width: \'auto\',
  textAlign: \'center\',
  fontFamily: \'Arial\',
  fontWeight: \'bold\',
  lineHeight: \'30px\',
  background: \'none\',
  cursor: \'pointer\'
})
label.customData = {
     ...item,
     type: 10
   }
this.map.addOverlay(label)

// 添加圆圈
  var circle = new window.BMap.Circle(new window.BMap.Point(item.lng, item.lat), 300, {
    strokeColor: \'#f8d642\',
    strokeWeight: 6,
    fillColor: color,
    strokeOpacity: 1
  })
circle.customData = {
   ...item,
   type: type
}
this.map.addOverlay(circle)
  
 // 添加连线
var lineArray = [] // 线的点的集合
  var polyline = new window.BMap.Polyline(lineArray, {
    strokeColor: \'#b7ae4c\',
    strokeWeight: 3,
    strokeOpacity: 1
  })
  this.map.addOverlay(polyline)

计算两点之间的距离

// 封装计算两点之间的距离;
calMeter(p1, p2) {
	 var myP1 = new window.BMap.Point(p1.lng, p1.lat) // 起点
	 var myP2 = new window.BMap.Point(p2.lng, p2.lat) // 终点
	 var distance = this.map.getDistance(myP1, myP2)
	 return (distance / 1000).toFixed(2) + \'千米\'
}

清除指定类型的标志

let Overlays = this.map.getOverlays()
  Overlays.forEach(item => {
     **if(item && item.customData && (item.customData.type === 10)) {**
       this.map.removeOverlay(item)
     }
   })

清除地图上所有标志物

let num = this.map.getOverlays().length
  if (num) {
    this.map.clearOverlays()
  }