- 申请百度账号
- 登录百度地图开放平台,控制台–》应用管理–》我的应用–》创建应用
- 选择浏览器端完成后即可获取AK
- 开发文档 文档很详细
- 添加覆盖物用法
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) }