好客租房173-地图找房createCircle方法

1复用之前创建覆盖物的代码逻辑

在覆盖物的单击事件中调用renderOverLays（id）方法

import React from 'react'// 导入axios
import axios from 'axios'// 导入封装好的 NavHeader 组件
import NavHeader from '../../components/NavHeader'// 导入样式
// import './index.scss'
import styles from './index.module.css'// 解决脚手架中全局变量访问的问题
const BMapGL = window.BMapGL// 覆盖物样式
const labelStyle = {cursor: 'pointer',border: '0px solid rgb(255, 0, 0)',padding: '0px',whiteSpace: 'nowrap',fontSize: '12px',color: 'rgb(255, 255, 255)',textAlign: 'center'
}export default class Map extends React.Component {componentDidMount() {this.initMap()}// 初始化地图initMap() {// 获取当前定位城市const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))// console.log(label, value)// 初始化地图实例const map = new BMapGL.Map('container')// 作用：能够在其他方法中通过 this 来获取到地图对象this.map = map// 创建地址解析器实例const myGeo = new BMapGL.Geocoder()// 将地址解析结果显示在地图上，并调整地图视野myGeo.getPoint(label,async point => {if (point) {//  初始化地图map.centerAndZoom(point, 11)// 添加常用控件map.addControl(new BMapGL.NavigationControl())map.addControl(new BMapGL.ScaleControl())// 调用 renderOverlays 方法this.renderOverlays(value)/* 渲染所有区覆盖物*//* const res = await axios.get(`http://localhost:8080/area/map?id=${value}`)res.data.body.forEach(item => {// 为每一条数据创建覆盖物const {coord: { longitude, latitude },label: areaName,count,value} = item// 创建坐标对象const areaPoint = new BMapGL.Point(longitude, latitude)// 创建覆盖物const label = new BMapGL.Label('', {position: areaPoint,offset: new BMapGL.Size(-35, -35)})// 给 label 对象添加一个唯一标识label.id = value// 设置房源覆盖物内容label.setContent(`<div class="${styles.bubble}"><p class="${styles.name}">${areaName}</p><p>${count}套</p></div>`)// 设置样式label.setStyle(labelStyle)// 添加单击事件label.addEventListener('click', () => {console.log('房源覆盖物被点击了', label.id)// 放大地图，以当前点击的覆盖物为中心放大地图map.centerAndZoom(areaPoint, 13)// 解决清除覆盖物时，百度地图API的JS文件自身报错的问题setTimeout(() => {// 清除当前覆盖物信息map.clearOverlays()}, 0)})// 添加覆盖物到地图中map.addOverlay(label)}) */}},label)}// 渲染覆盖物入口// 1 接收区域 id 参数，获取该区域下的房源数据// 2 获取房源类型以及下级地图缩放级别async renderOverlays(id) {const res = await axios.get(`http://localhost:8080/area/map?id=${id}`)// console.log('renderOverlays 获取到的数据：', res)const data = res.data.body// 调用 getTypeAndZoom 方法获取级别和类型const { nextZoom, type } = this.getTypeAndZoom()data.forEach(item => {// 创建覆盖物this.createOverlays(item, nextZoom, type)})}// 计算要绘制的覆盖物类型和下一个缩放级别// 区   -> 11 ，范围：>=10 <12// 镇   -> 13 ，范围：>=12 <14// 小区 -> 15 ，范围：>=14 <16getTypeAndZoom() {// 调用地图的 getZoom() 方法，来获取当前缩放级别const zoom = this.map.getZoom()let nextZoom, type// console.log('当前地图缩放级别：', zoom)if (zoom >= 10 && zoom < 12) {// 区// 下一个缩放级别nextZoom = 13// circle 表示绘制圆形覆盖物（区、镇）type = 'circle'} else if (zoom >= 12 && zoom < 14) {// 镇nextZoom = 15type = 'circle'} else if (zoom >= 14 && zoom < 16) {// 小区type = 'rect'}return {nextZoom,type}}// 创建覆盖物createOverlays(data, zoom, type) {const {coord: { longitude, latitude },label: areaName,count,value} = data// 创建坐标对象const areaPoint = new BMapGL.Point(longitude, latitude)if (type === 'circle') {// 区或镇this.createCircle(areaPoint, areaName, count, value, zoom)} else {// 小区this.createRect(areaPoint, areaName, count, value)}}// 创建区、镇覆盖物createCircle(point, name, count, id, zoom) {// 创建覆盖物const label = new BMapGL.Label('', {position: point,offset: new BMapGL.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)}// 创建小区覆盖物/* <div class="${styles.rect}"><span class="${styles.housename}">${name}</span><span class="${styles.housenum}">${num}套</span><i class="${styles.arrow}"></i></div>*/createRect(point, name, count, id) {// 创建覆盖物const label = new BMapGL.Label('', {position: point,offset: new BMapGL.Size(-50, -28)})// 给 label 对象添加一个唯一标识label.id = id// 设置房源覆盖物内容label.setContent(`<div class="${styles.rect}"><span class="${styles.housename}">${name}</span><span class="${styles.housenum}">${count}套</span><i class="${styles.arrow}"></i></div>`)// 设置样式label.setStyle(labelStyle)// 添加单击事件label.addEventListener('click', () => {console.log('小区被点击了')})// 添加覆盖物到地图中this.map.addOverlay(label)}render() {return (<div className={styles.map}>{/* 顶部导航栏组件 */}<NavHeader>地图找房</NavHeader>{/* 地图容器元素 */}<div id="container" className={styles.container} /></div>)}
}

运行结果

好客租房173-地图找房createCircle方法相关推荐

好客租房172-地图找房createOverlays
//处理createOverlays 通过参数来决定调用什么方法 import React from 'react'// 导入axios import axios from 'axios'// 导入封 ...
好客租房153-地图找房模块功能分析
好客租房168-地图找房分析
仿链家地图找房的简单实现 1
本篇目录: 使用入门简单使用流程链家地图找房效果区域点位气泡数据结构实现 addOverlay方法区域边界获取区域点位经纬度获取区域边界小结最近由于项目需要,开始调研如何使用百度地 ...
Java开发导入腾讯地图描点_腾讯地图点聚合开发-实现地图找房功能
链家实现的效果分析链家的地图找房主要分为三层.第一层为市区层,比如南山.罗湖等:第二层为片区,比如南头.科技园等:第三层则为小区. 因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一 ...
腾讯地图实现地图找房功能
链家实现的效果最近接到一个需求,需要使用鹅厂地图实现类似链家网的地图找房功能,然后我去网上看了一下,基本上使用的都是百度地图.于是我打算自己稍微封装一下,可以在使用的时候更加的方便. 01. 分析 ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
java地图完整项目-地图找房（基于百度地图-MongoDB）
1.BMapGLLib库网址: GitHub - huiyan-fe/BMapGLLib: 百度地图JSAPI GL版JavaScript开源工具库该库相关辅助功能可通过点击上述网址进行查看! 2 ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...

好客租房173-地图找房createCircle方法

好客租房173-地图找房createCircle方法相关推荐

最新文章

热门文章