backup
This commit is contained in:
HuaYu
parent
e8fba65f81
commit
41ad91a89d
|
|
@ -1,18 +1,162 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import './index.css'
|
// import './index.css'
|
||||||
import 'react-virtualized/styles.css'
|
import 'react-virtualized/styles.css'
|
||||||
|
import NavHeader from "../../components/NavHeader";
|
||||||
|
import styles from './index.module.css'
|
||||||
|
import axios from "axios";
|
||||||
|
import Item from "antd-mobile/es/components/dropdown/item";
|
||||||
|
import { type } from "@testing-library/user-event/dist/type";
|
||||||
|
|
||||||
export default class Map extends React.Component {
|
export default class Map extends React.Component {
|
||||||
|
async renderOverlays(id){
|
||||||
|
const res = await axios.get('http://localhost:8080/area/map?id='+id)
|
||||||
|
const {nextZoom,type} = this.getTypeAndZoom
|
||||||
|
res.data.body.forEach(element => {
|
||||||
|
this.createOverlays(element,nextZoom,type)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
createCircle(element){
|
||||||
|
const {coord:{longitude,latitude},label:areaName,count,value}=element;
|
||||||
|
console.info(longitude,latitude)
|
||||||
|
var label = new window.BMapGL.Label(`
|
||||||
|
<div class="${styles.bubble}">
|
||||||
|
<p class="${styles.name}">${areaName}</p>
|
||||||
|
<p>${count}</p>
|
||||||
|
`, { // 创建文本标注
|
||||||
|
position: new window.BMapGL.Point(longitude,latitude), // 设置标注的地理位置
|
||||||
|
offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
|
||||||
|
})
|
||||||
|
this.map.addOverlay(label);
|
||||||
|
label.id=value
|
||||||
|
label.addEventListener('click',()=>{
|
||||||
|
console.log(value)
|
||||||
|
// 放大地图
|
||||||
|
this.map.centerAndZoom(new window.BMapGL.Point(longitude,latitude),nextZoom)
|
||||||
|
// 清除当前覆盖物信息
|
||||||
|
this.map.clearOverlays()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
createRect(element){
|
||||||
|
const {coord:{longitude,latitude},label:areaName,count,value}=element;
|
||||||
|
console.info(longitude,latitude)
|
||||||
|
var label = new window.BMapGL.Label(`
|
||||||
|
<div class="${styles.bubble}">
|
||||||
|
<p class="${styles.name}">${areaName}</p>
|
||||||
|
<p>${count}</p>
|
||||||
|
`, { // 创建文本标注
|
||||||
|
position: new window.BMapGL.Point(longitude,latitude), // 设置标注的地理位置
|
||||||
|
offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
|
||||||
|
})
|
||||||
|
this.map.addOverlay(label);
|
||||||
|
label.id=value
|
||||||
|
label.addEventListener('click',()=>{
|
||||||
|
console.log(value)
|
||||||
|
this.getHousesList(value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async getHousesList(id){
|
||||||
|
const res = await axios.get(`http://localhost:8080/houses?cityId=${id}`)
|
||||||
|
|
||||||
|
}
|
||||||
|
createOverlays(element,nextZoom,type){
|
||||||
|
if(type === 'circle'){
|
||||||
|
this.createCircle(element)
|
||||||
|
}else{
|
||||||
|
this.createRect(element)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getTypeAndZoom(){
|
||||||
|
const zoom = this.map.getZoom()
|
||||||
|
let nextZoom,type
|
||||||
|
if(zoom>=10&&zoom<12){
|
||||||
|
nextZoom=13
|
||||||
|
type='circle'
|
||||||
|
}else if(zoom>=12&&zoom<14){
|
||||||
|
nextZoom=15
|
||||||
|
type='circle'
|
||||||
|
}else if(zoom>=14&&zoom<16){
|
||||||
|
type='rect'
|
||||||
|
}
|
||||||
|
return {nextZoom,type}
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
// 获取当前城市
|
||||||
|
const {label,value}=JSON.parse(localStorage.getItem('local_city'))
|
||||||
|
console.log(label,value)
|
||||||
|
// 解析当前坐标
|
||||||
|
|
||||||
|
var myGeo = new window.BMapGL.Geocoder();
|
||||||
|
// 将地址解析结果显示在地图上，并调整地图视野
|
||||||
|
// myGeo.getPoint('北京市海淀区上地10街', function(point){
|
||||||
|
// if(point){
|
||||||
|
// map.centerAndZoom(point, 16);
|
||||||
|
// map.addOverlay(new window.BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
|
||||||
|
// }else{
|
||||||
|
// alert('您选择的地址没有解析到结果！');
|
||||||
|
// }
|
||||||
|
// }, '北京市')
|
||||||
var map = new window.BMapGL.Map("container")
|
var map = new window.BMapGL.Map("container")
|
||||||
|
// 在其他方法中可以使用map
|
||||||
|
this.map = map
|
||||||
|
myGeo.getPoint(label,async point=>{
|
||||||
|
if(point){
|
||||||
|
map.centerAndZoom(point,11)
|
||||||
|
// map.addOverlay(new window.BMapGL.Marker(point))
|
||||||
|
var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
|
||||||
|
map.addControl(scaleCtrl);
|
||||||
|
var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
|
||||||
|
map.addControl(zoomCtrl);
|
||||||
|
var cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
|
||||||
|
map.addControl(cityCtrl);
|
||||||
|
this.renderOverlays(value)
|
||||||
|
// 文本覆盖物
|
||||||
|
// const res = await axios.get('http://localhost:8080/area/map?id='+value)
|
||||||
|
// res.data.body.forEach(element => {
|
||||||
|
// //
|
||||||
|
// const {coord:{longitude,latitude},label:areaName,count,value}=element;
|
||||||
|
// console.info(longitude,latitude)
|
||||||
|
// var label = new window.BMapGL.Label(`
|
||||||
|
// <div class="${styles.bubble}">
|
||||||
|
// <p class="${styles.name}">${areaName}</p>
|
||||||
|
// <p>${count}</p>
|
||||||
|
// `, { // 创建文本标注
|
||||||
|
// position: new window.BMapGL.Point(longitude,latitude), // 设置标注的地理位置
|
||||||
|
// offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
|
||||||
|
// })
|
||||||
|
// map.addOverlay(label);
|
||||||
|
// label.id=value
|
||||||
|
// label.addEventListener('click',()=>{
|
||||||
|
// console.log(value)
|
||||||
|
// // 放大地图
|
||||||
|
// map.centerAndZoom(new window.BMapGL.Point(longitude,latitude),13)
|
||||||
|
// // 清除当前覆盖物信息
|
||||||
|
// map.clearOverlays()
|
||||||
|
// })
|
||||||
|
|
||||||
|
// });
|
||||||
|
// var point = new BMapGL.Point(116.404, 39.915);
|
||||||
|
// var content = "文本覆盖物";
|
||||||
|
// var label = new window.BMapGL.Label(content, { // 创建文本标注
|
||||||
|
// position: point, // 设置标注的地理位置
|
||||||
|
// offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
|
||||||
|
// })
|
||||||
|
// label.setStyle({color:'red'})
|
||||||
|
// map.addOverlay(label);
|
||||||
|
}
|
||||||
|
},label)
|
||||||
// 设置中心点
|
// 设置中心点
|
||||||
var point = new window.BMapGL.Point(116.404, 39.915);
|
// var point = new window.BMapGL.Point(116.404, 39.915);
|
||||||
map.centerAndZoom(point, 15);
|
// map.centerAndZoom(point, 15);
|
||||||
map.enableScrollWheelZoom(true);
|
map.enableScrollWheelZoom(true);
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div id="container">
|
<div className={styles.map}>
|
||||||
</div>)
|
<NavHeader>地图找房</NavHeader>
|
||||||
|
<div id="container" className={styles.container}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue