锐客网

  1. 首页 > it技术 > >

React|React开发App中使用百度地图

前端react.jsreact

【React|React开发App中使用百度地图】React|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(` ${styles.bubble}">${styles.name}">${name}
    ${count}套
    `)// 设置样式 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) }

    推荐阅读


    上一篇：qiankun|微前端-qiankun配置

    下一篇：熊猫周刊|《熊猫周刊》-2022/03/25