${areaName}
-${count}
- `, { // 创建文本标注 - 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(` -${areaName}
-${count}
- `, { // 创建文本标注 - 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(` - //${areaName}
- //${count}
- // `, { // 创建文本标注 - // 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); - map.enableScrollWheelZoom(true); - } - render() { - return ( -文本
+联动数
+