
| import React from 'react' |
| |
| |
| import axios from 'axios' |
| |
| |
| import NavHeader from '../../components/NavHeader' |
| |
| |
| |
| 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')) |
| |
| |
| |
| const map = new BMapGL.Map('container') |
| |
| 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()) |
| |
| |
| |
| |
| |
| |
| |
| |
| 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.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) |
| |
| |
| setTimeout(() => { |
| |
| map.clearOverlays() |
| }, 0) |
| }) |
| |
| |
| map.addOverlay(label) |
| }) |
| } |
| }, |
| label |
| ) |
| } |
| |
| render() { |
| return ( |
| <div className={styles.map}> |
| {/* 顶部导航栏组件 */} |
| <NavHeader>地图找房</NavHeader> |
| {/* 地图容器元素 */} |
| <div id="container" className={styles.container} /> |
| </div> |
| ) |
| } |
| } |
运行结果

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性