地图找房（二）03——百度地图-批量绘制多个覆盖物 & 加载提示效果

地图找房——百度地图-批量绘制多个覆盖物 & 加载提示效果

• 批量绘制多个覆盖物

单个覆盖物逻辑

drawSingleDot = (dotInfo) => {
  // 设置地图的覆盖物
  let { longitude, latitude } = dotInfo.coord
  let point = new window.BMap.Point(longitude, latitude)
  let opts = {
    // 指定文本标注所在的地理位置
    position: point,    
    // 设置文本偏移量
    offset: new window.BMap.Size(-30, -30)    
  }
  // 创建文本标注对象
  let content = `
    <div class='${styles.labelContent}'>
      <div>${dotInfo.label}</div>
      <p>${dotInfo.count}套</p>
    </div>
  `
  let label = new window.BMap.Label(content, opts);
  label.setStyle({
    height : "0px",
    width: '0px',
    border: '0'
  })
  // 添加覆盖物
  // map.addOverlay(label) 
  return label
}

批量绘制覆盖物

// 批量绘制覆盖物
mapData.forEach(item => {
  // 生成当个覆盖物
  let dot = this.drawSingleDot(item)
  // console.log(dot)
  map.addOverlay(dot) 
  // 隐藏提示
  Toast.hide()
})

加载提示效果

备注

提示添加

import { Toast } from 'antd-mobile'

  // 添加提示   0-表示不消失
    Toast.loading('正在加载...', 0)   
  // 隐藏提示
  Toast.hide()