vue 百度地图绘制点线面

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2、在页面中使用地图

<baidu-map
      :zoom="13"
      :minZoom="8"
      :maxZoom="15"
      :style="{ height: 500 + 'px' }"
      @ready="handler"
    ></baidu-map>

在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()
  }