[JavaScript知识库]React开发App中使用百度地图

1. 申请百度账号
2. 登录百度地图开放平台，控制台–》应用管理–》我的应用–》创建应用
3. 选择浏览器端完成后即可获取AK
4. 开发文档 文档很详细

• 添加覆盖物用法

  point即为坐标： const point= new BMap.Point(longitude, latitude)
  name即为展示地区名称
  count即可展示数量
  id即为唯一标识直接使用后台返回的地区唯一标识即可
  zoom为地图放大比例

  // 创建区、镇覆盖物
  createCircle(point, name, count, id, zoom) {
      // 创建覆盖物
      const label = new BMap.Label('', {
        position: point,
        offset: new BMap.Size(-35, -35)
      })
  
      // 给 label 对象添加一个唯一标识
      label.id = id
  
      // 设置房源覆盖物内容
      label.setContent(`
        <div class="${styles.bubble}">
          <p class="${styles.name}">${name}</p>
          <p>${count}套</p>
        </div>
      `)
  
      // 设置样式
      label.setStyle(labelStyle)
  
      // 添加单击事件
      label.addEventListener('click', () => {
        // 调用 renderOverlays 方法，获取该区域下的房源数据
        this.renderOverlays(id)
  
        // 放大地图，以当前点击的覆盖物为中心放大地图
        this.map.centerAndZoom(point, zoom)
  
        // 解决清除覆盖物时，百度地图API的JS文件自身报错的问题
        setTimeout(() => {
          // 清除当前覆盖物信息
          this.map.clearOverlays()
        }, 0)
      })
  
      // 添加覆盖物到地图中
      this.map.addOverlay(label)
  }