backup
This commit is contained in:
HuaYu
parent
e8fba65f81
commit
41ad91a89d
|
|
@ -1,18 +1,162 @@
|
|||
import React from "react";
|
||||
import './index.css'
|
||||
// import './index.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 {
|
||||
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() {
|
||||
// 获取当前城市
|
||||
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")
|
||||
// 在其他方法中可以使用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);
|
||||
map.centerAndZoom(point, 15);
|
||||
// var point = new window.BMapGL.Point(116.404, 39.915);
|
||||
// map.centerAndZoom(point, 15);
|
||||
map.enableScrollWheelZoom(true);
|
||||
}
|
||||
render() {
|
||||
return(
|
||||
<div id="container">
|
||||
</div>)
|
||||
return (
|
||||
<div className={styles.map}>
|
||||
<NavHeader>地图找房</NavHeader>
|
||||
<div id="container" className={styles.container}>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue