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)
    }
    
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值