好客租房172-地图找房createOverlays

//处理createOverlays 通过参数来决定调用什么方法

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.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())/* 1 获取房源数据。2 遍历数据，创建覆盖物，给每个覆盖物添加唯一标识（后面要用）。3 给覆盖物添加单击事件。4 在单击事件中，获取到当前单击项的唯一标识。5 放大地图（级别为13），调用 clearOverlays() 方法清除当前覆盖物。*/const res = await axios.get(`http://localhost:8080/area/map?id=${value}`)console.log('房源数据：', res)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)}async renderOverlay(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)})}// 创建覆盖物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)}}getTypeAndZoom(){//调用地图的getZoom方法 来获取缩放级别const zoom=this.map.getZoom()console.log(zoom,"获取级别和类型")let nextZoom,typeif(zoom>=10&&zoom<12){nextZoom=13type='circle'}else if(zoom>=12&&zoom<14){nextZoom=15type='circle'}else if(zoom>=14&&zoom<16){type='rect'}return{nextZoom,type}}render() {return (<div className={styles.map}>{/* 顶部导航栏组件 */}<NavHeader>地图找房</NavHeader>{/* 地图容器元素 */}<div id="container" className={styles.container} /></div>)}
}

好客租房172-地图找房createOverlays相关推荐

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

好客租房172-地图找房createOverlays

好客租房172-地图找房createOverlays相关推荐

最新文章

热门文章