React开发App中使用百度地图

React开发App中使用百度地图_第1张图片

  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) }

你可能感兴趣的:(React,前端,react.js,前端)