百度地图 vue 基本使用

百度地图参考文档：https://lbsyun.baidu.com/index.php?title=jspopularGL

//统一设置
import marker from '@/assets/marker1.png'

const p1 = new BMap.Point(121.286742, 31.132338)
const p2 = new BMap.Point(121.286742, 31.132338)
const map = new BMap.Map('map')
map.centerAndZoom(p1, 11)

经纬度自定义坐标icon

 // 设置icon
 const startIcon = new BMap.Icon(this.formData.type === 2 ? marker2 : marker5, new BMap.Size(32, 39), {
   anchor: new BMap.Size(20, 39), // icon坐标位置
   imageSize: new BMap.Size(29, 29),//设置图片展示大小
   imageOffset: new BMap.Size(0, 0) // 设置图片偏移
 })
 const startMarker = new BMap.Marker(p1, { icon: marker })
 map.addOverlay(startMarker)

根据经纬度画直线

const driverPolylin = new BMap.Polyline([p1, p2], { strokeColor: '#EF8F2F', strokeWeight: 4, strokeOpacity: 1, strokeStyle: 'dashed' }) // 创建折线
map.addOverlay(driverPolylin)

根据两点规划出开车路线且路线自定义样式

const driving = new BMap.DrivingRoute(map, { renderOptions: { map, autoViewport: true }})
driving.search(p1, p2)
// 重新设置路线颜色
driving.setPolylinesSetCallback((result) => {
  // 清除路线规划
  driving.clearResults()
  const points = []
  result[0].Br.map(function(item) {
    points.push(new BMap.Point(item.lng, item.lat))
  })
  const polyline = new BMap.Polyline(points, { strokeColor: '#558EF7', strokeWeight: 4, strokeOpacity: 1, 'enableDragging': true }) // 创建折线
  map.addOverlay(polyline) // 增加折线
})

如果路线规划重新设置样式 与 两点之间直线同时存在，直线需要放到重新设置路线样式里面，不然清除路线规划会把直线清掉

多个坐标单独移除指定的覆盖物

//获取所有的坐标点，需要移除的坐标单组增加个name 进行判断
const allOverlay = map.getOverlays() 
allOverlay.map(item => {
  if (item.name === 'driverIcon') {
    map.removeOverlay(item)
  }
})

清除地图上所有覆盖物

map.clearOverlays();    

自定义覆盖物（类如图片是正方形，但是标点想展示圆形的可使用）官方demo

// 自定义覆盖物
function customOverlay(point) {
  this._point = point
}
// 继承BMapGL.Overlay
customOverlay.prototype = new BMap.Overlay()
// 实现initialize方法来创建自定义覆盖物
const that = this
customOverlay.prototype.initialize = function(map) {
  this._map = map
  // var pixel = map.pointToOverlayPixel(this._point, {
  //   useRound: false, // 设置此参数，防止抖动
  //   fixPosition: true // 覆盖物跨越180时修正位置
  // })
  const div = (this._div = document.createElement('div'))
  div.style.position = 'absolute'
  div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat)
  // div.style.backgroundColor = 'red'
  // div.style.color = 'white'
  // div.style.padding = '4px 8px'
  // div.style.borderRadius = '50%'
  // div.style.cursor = 'pointer'
  // div.style.whiteSpace = 'nowrap'
  // div.style.MozUserSelect = 'none'
  // div.style.fontSize = '12px'
  // div.style.lineHeight = '1.5'
  // div.innerHTML = this._text

  const img = document.createElement('img')
  img.style.width = '28px'
  img.style.height = '28px'
  img.style.borderRadius = '50%'
  img.src = (that.userLogo || marker1)  //图片路径
  div.appendChild(img)
  map.getPanes().labelPane.appendChild(div)
  return div
}
customOverlay.prototype.draw = function() {
  const map = this._map
  const pixel = map.pointToOverlayPixel(this._point)
  this._div.style.left = pixel.x - 13.5 + 'px' //根据实际位置调试
  this._div.style.top = pixel.y - 10 + 'px' //根据实际位置调试
}
// 创建自定义覆盖物对象
const myCompOverlay = new customOverlay(new BMap.Point(this.userLng, this.userLat))  // 经纬度根据实际使用更换
map.addOverlay(myCompOverlay)

如果需要一秒更新一次位置的话，我这边是用promise先清掉之前的位置再重现展示，不然会显示多个，如果路线规划与直线同时存在，这两个都需要放到循环里面，不然会不显示

每天一个新知识，一起加油吧！