mounted() { // this.initMapArea(); // this.initMapStreet() // this.getTenXunData() // this.initMapProject() // this.initMapHome() this.initMap() }, watch: { // 11 -- 5km 13--1km 14--500m 17--50m // 代码 房屋 16 项目15 街道11-13 区9.5 watchZoom(val) { console.log(val,"监控") let self = this if(val == 9.4 && this.isChangeZoom){ self.initMapArea(); //zoom 9.5 } if(val == 12 && this.isChangeZoom){ self.initMapStreet(); //zoom 11.8 12.8 } if(val == 15 && this.isChangeZoom){ self.initMapProject(); //zoom 15 } if(val == 16 && this.isChangeZoom){ self.initMapHome(); //zoom 16 17 } }, keyword(val) { if (val) { this.isSearchIcon = true //显示搜索按钮还是下拉按钮 this.projectTable = false this.homeTable = false this.leftTitle = false } } }, methods: { //左上搜索功能 search() { this.rowStyleId = null; this.isSearchIcon = false; this.projectTable = true; this.leftTitle = true; // this.$confirm('已搜索到28个项目,10个房屋,请选择查看内容?', '提示', { // confirmButtonText: '查看项目', // cancelButtonText: '查看房屋', // type: 'warning' // }).then(() => { // console.log("成功") // this.isSearchIcon = false; // this.projectTable=true; // // }).catch(() => { // console.log("失败") // this.isSearchIcon = false; // this.projectTable=false; // // this.homeTable= true; // }); }, down() { this.isSearchIcon = true; this.homeTable = false; this.projectTable = false; this.leftTitle = false; }, rigtBtn() { this.midContent = !this.midContent; if (this.midContent) { this.rightBbtnText = '关闭筛选找房' } else { this.rightBbtnText = '打开筛选找房' } }, projectRowClick(row, column, event) { this.rowStyleId = row.id console.log(row, column, event, "7777777777777777777777777") $("#container").empty(); this.initMap(row.id) }, homeRowClick(row, column, event) { this.rowStyleId = row.id console.log(row, column, event, "7777777777777777777777777") $("#container").empty(); this.initMap(row.id) }, isRed(row) { if (this.rowStyleId == row.row.id) { return { backgroundColor: "#F5F7FA", color: "#1C84C6", }; } }, handLeftTitle(str) { if (str === 'project') { this.projectTable = !this.projectTable; this.homeTable = false; } else { this.homeTable = !this.homeTable; this.projectTable = false; } }, //地图初始化函数，本例取名为 init，开发者可根据实际情况定义 highlight(map) { console.log(map, "map2222222222222222222222222222") // 服务类库文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocService var district = new TMap.service.District({ // 新建一个行政区划类 polygon: 2, // 返回行政区划边界的类型 }); // 关键字搜索行政区划，110000 = 北京行政区划代码 310000上海 district.getChildren({id: 310000}).then((result) => { if (!result && !result.result) return; console.log(result, "上海") // 获取省市区列表及其边界信息 // var paths = result.result[0][0].polygon; var arr = result.result[0]; // console.log(paths,"上海22") map.enableAreaHighlight({ paths: paths, highlightColor: 'rgba(0,0,0,0)', // 高亮颜色 // shadeColor: 'rgba(4,8,14,1)', // 其余阴影部分 }); // MultiPolyline文档地址：https://lbs.qq.com/javascript_gl/doc/multiPolylineOptions.html new TMap.MultiPolyline({ map: map, styles: { polyline: new TMap.PolylineStyle({ color: '#017cf7', // 线条填充色， width: 8, lineCap: 'round', enableBloom: true, // 是否启用泛光 注：为true才会有效果 }), }, geometries: [ { styleId: 'polyline', // 样式id paths: paths, }, ], }); }); }, //监听回调函数（非匿名函数） clickHandler(data) { //console.log("data",data); $.modal.openTab('房屋详情', houseprefix + "/housedetails/" + data.geometry.id); }, //房屋数据 转 地理经纬度 locationToIp() { console.log("房屋数据 转 地理经纬度"); // this.getData() // $.ajax({ // url: prefix + "/dealMapData", // type: 'post', // async: false, // success: function (data) { // console.log("data", data); // // var status=data.status; // // if(status==0){ // // var mapData = data.result; // // houseMapDataList1.push(mapData); // // } // } // }); }, // gzwhouse/mapDataDeal/getGzwHouseListToMap 获得房屋list post传参 street所属街道 getChildren(params: GetChildrenParams) //zoom变化时 赋值zoom // restMap(){ // console.log(this.zoom," restMap") // $("#container").empty(); // if(this.mapView){ // this.mapView.destroy(); // } // }, clearMap() { this.isChangeZoom = false if (this.infoWindow1) { this.infoWindow1.close(); this.infoWindow1 = null; // 清空引用 } // 清空地图上面积开始 if (this.area) { this.area.remove(); this.area = null; // 清空引用 } // 清空地图上面积结束 // 清空地图上的label开始 if (this.label) { // 可能的移除方法 this.label.setMap(null); // this.label.remove(); this.label = null; // 清空引用 // this.labelGeometries = null } // 清空地图上的label结束 // 关闭并清空所有的 infoWindow 开始 if(this.allInfoWindow && this.allInfoWindow.length>0){ this.allInfoWindow.forEach(infoWindow => { infoWindow.close(); // 关闭 infoWindow }); this.allInfoWindow = []; } // 关闭并清空所有的 infoWindow 结束 //清空地图上的marker 开始 if(this.markerLayers){ this.markerLayers.setGeometries([]); // 清空标记 this.markerLayers = null; } if(this.mapView){ this.mapView.off('zoom_changed',this.homeZoomChange); this.mapView.off('zoom_changed',this.projectZoomChange); this.mapView.off('zoom_changed',this.streetZoomChange); this.mapView.off('zoom_changed', this.areaZoomChange); } //清空地图上的marker 结束 }, //初始化地图 initMap(){ //初始化地图 this.mapView = new TMap.Map("container", { center:new TMap.LatLng(31.188334, 121.436307), //设置地图中心坐标 // mapStyleId: "style7", //个性化样式 baseMap: { //设置底图样式 type: "vector", //设置底图为矢量底图 features: [ //设置矢量底图要素类型 "base", "point", ], }, zoom:9.5 , //设置地图缩放级别this.zoom pitch: 0, //设置俯仰角 rotation: 0, //设置地图旋转角度 mapStyleId: 'style1', }); // this.initMapArea() this.initMapStreet() // this.initMapProject() // this.initMapHome() }, //显示各区 zoom 9.5 initMapArea() { let self = this; let map = this.mapView; self.clearMap(); this.zoom = 9.5; map.setZoom(this.zoom); map.setCenter(new TMap.LatLng(31.188334, 121.436307)); // 获取各区数据 let params= { mapAreaType: 'cityArea' } let url = prefixctx + "gzwhouse/mapDataDeal/searchGzwHouseListToMap" let obj = this.getData(url, 'post', params) // console.log(obj, "obj 区 obj 1111arrArea11 arrArea arrArea arrArea") let arr = obj.cityArea; let paths = []; let labelGeometries = []; let areaListStr = JSON.stringify(this.areaList); let areaList = JSON.parse(areaListStr); areaList.forEach((item, index) => { // const styleId = styleMap[item.id]; //数据所有的id值 // const styleId = 'styel'+ index; const styleId = 'styel0'; let path = []; // let name = item.fullname; let id = item.id; item.polygon.forEach((p) => { path.push([p.reverse()]); }); //进行纬经度进行调换位置 paths.push({ path, //经纬度点串 styleId, //id=styleId name, id }); // label开始 let obj = { 'id': item.id, //点图形数据的标志信息 'styleId': 'label', //样式id 'position': new TMap.LatLng(item.location.lat, item.location.lng, 50), //标注点位置 // 'content': item.fullname + '\n' + "44444444444" + '<br/>' + "8888888888", //标注文本 content: item.fullname, // 'properties': { //标注点的属性数据 // } }; labelGeometries.push(obj) // label结束 #6a7797 106,119,153 背景色 215,221,235 #d7ddeb }); // self.labelGeometries = labelGeometries // 跟接口查询的数据合并 paths.forEach(p => { // ps.push(p.name) var found = false; arr.forEach(c => { // xx.push(c.cityArea) if (p.name == c.cityArea) { p.houseArea = c.houseArea; //房屋面积 p.houseCount = c.houseCount; //房屋数量 found = true; } if (!found){ p.houseArea = 0 p.houseCount = 0 } }) }) self.area = new TMap.visualization.Area({ styles: { //设置区域图样式 styel0: { fillColor: "rgba(215,221,235,0)", //设置区域颜色 strokeColor: "#31478F", //设置区域边线颜色 #6a7797 strokeWidth: 2, //区域边线宽度 } }, selectOptions: { //设置拾取配置 action: 'hover',//hover style: { fillColor: 'rgba(28,213,255,1)', //设置区域填充颜色 strokeColor: '#fff', //设置区域边线颜色 strokeWidth: 2, //区域边线宽度 strokeDashArray: [0, 0] //边线虚线展示方式 }, enableHighlight: false // 是否使用高亮效果。默认为true，即未被选中的图形透明度将大幅降低，以凸显选中图形和地图。 } }) .setData(paths) .addTo(map); self.label = new TMap.MultiLabel({ id: 'label-layer', map: map, styles: { 'label': new TMap.LabelStyle({ 'color': '#31478F', //颜色属性 'size': 16, //文字大小属性16 }), }, geometries: labelGeometries }); map.on('zoom_changed', self.areaZoomChange); // let infoWindow=null; let infoWindow = self.infoWindow1 let area = self.area; let center = null; area.on('mouseover', (v) => { // console.log(v,"谢谢谢谢谢寻寻寻寻寻寻寻寻") center = new TMap.LatLng(v.latLng.lat, v.latLng.lng);//设置中心点坐标 infoWindow = new TMap.InfoWindow({ map: map, position: center, //设置信息框位置 enableCustom: true, //不显示关闭按钮 offset: {y: -70, x: -5}, content: `<div class="info_card"> <div class="info_card_title"> <img src="/img/sjxfb.png" alt="" class="info_card_img"> <span>${v.detail.area.name}</span> </div> <div> <span>房屋数量 : </span> <span class="info_card_num">${v.detail.area.houseCount}</span> <span>套</span> </div> <div> <span>可租赁面积 : </span> <span class="info_card_num">${v.detail.area.houseArea}</span> <span>㎡</span> </div> <!-- <div>--> <!-- <span>空置面积/可租赁面积 : </span>--> <!-- <span class="info_card_num">13.12%</span>--> <!-- </div>--> </div>` //设置信息框内容 }); self.infoWindow1 = infoWindow; }); area.on('mouseout', (v) => { if(infoWindow){ infoWindow.close(); } // console.log(v, " mous2233333eout mouseout ") }); area.on('click', (v) => { infoWindow.close(); if (v.detail.area) { console.log(v.detail.area.name,v.detail.area,"vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv") let areaName = v.detail.area.name; self.areaName = areaName; //原本地图销毁 // $("#container").empty(); // map.destroy(); // this.initMapStreet() // this.initMap() this.initMapStreet(v.detail.area.id) } else { self.areaName = '' } }); // self.showSearch = true $(".search").removeClass("displaySearch") }, //显示各社区街道id="310104" id = 'all'查所有 zoom 11.8/12.8 watch12 initMapStreet(id) { let self = this; let map = self.mapView; self.clearMap(); id="310104"; // 获取各街道项目数据 let params= { mapAreaType:'street', // positionCityArea:'徐汇区' // houseCityArea:'徐汇区' houseCityArea:'虹口区' } let url = prefixctx + "gzwhouse/mapDataDeal/searchGzwHouseListToMap" let obj = this.getData(url, 'post', params) // console.log(obj, "显示各街道 街道 街道") let arr = obj.street; let list = []; let center = null; if(id == 'all'){ for(let key in this.jdObj){ list = list.concat(this.jdObj[key]) } center = new TMap.LatLng(31.230785, 121.525252) }else{ list = this.jdObj[id]; //获取数据 center = new TMap.LatLng(this.streetCenter[id].lat, this.streetCenter[id].lng) } map.setCenter(center); // 长宁区 310105 徐汇区 310104 黄浦区 310101 虹口区310109 静安区310106 普陀区310107 //杨浦区 310110 浦东新区 310115 let smallArea =['310105','310104','310101','310109','310106','310107','310110'] if(smallArea.indexOf(id)>-1){ self.zoom = 12.8 } if(id == '310115'){ self.zoom = 11.8 } map.setZoom(self.zoom); var paths = []; var labelGeometries = []; // console.log(list,"aaaaaaaaaaaaaaaa") let arr0=[]; arr0 = JSON.parse(JSON.stringify(list)) arr0.forEach((item, index) => { // const styleId = styleMap[item.id]; //数据所有的id值 // const styleId = 'styel'+ index; const styleId = 'styel0'; let path = []; // let name = item.fullname; let location=item.location; let i = index;//保存下标 item.polygon.forEach((p) => { path.push([p.reverse()]); }); //进行纬经度进行调换位置 paths.push({ path, //经纬度点串 styleId, //id=styleId name, location, i }); // label开始 let obj = { 'id': item.id, //点图形数据的标志信息 'styleId': 'label', //样式id 'position': new TMap.LatLng(item.location.lat, item.location.lng, 10), //标注点位置 'content': item.fullname, //标注文本 'properties': { //标注点的属性数据 // 'itemData': item } }; labelGeometries.push(obj) // label结束 #6a7797 106,119,153 背景色 215,221,235 #d7ddeb }); // self.labelGeometries = labelGeometries paths.forEach(p => { var found = false; arr.forEach(c => { if (p.name === c.street) { p.houseArea = c.houseArea, //房屋面积 p.houseCount = c.houseCount, //房屋数量 p.rentDayPrice = c.rentDayPrice //价格 found = true; } if (!found) { p.houseArea = 0 p.houseCount = 0 p.rentDayPrice = 0 } }) }) let pathStr = JSON.stringify(paths); console.log(paths,"xxxxxpathswwwwwwww") console.log(this.zoom,"xxx00 后面") // debugger self.area = new TMap.visualization.Area({ styles: { //设置区域图样式 styel0: { fillColor: "rgba(215,221,235,0.2)", //设置区域颜色 strokeColor: "#31478F", //设置区域边线颜色 #6a7797 strokeWidth: 0, //区域边线宽度2 } }, selectOptions: { //设置拾取配置 action: 'hover',//hover style: { fillColor: 'rgba(28,213,255,1)', //设置区域填充颜色 strokeColor: '#fff', //设置区域边线颜色 strokeWidth: 0, //区域边线宽度2 strokeDashArray: [0, 0] //边线虚线展示方式 }, enableHighlight: false // 是否使用高亮效果。默认为true，即未被选中的图形透明度将大幅降低，以凸显选中图形和地图。 } }) .setData(paths) .addTo(map); self.label = new TMap.MultiLabel({ id: 'label-layer', map: map, styles: { 'label': new TMap.LabelStyle({ 'color': '#31478F', //颜色属性 'size': 16, //文字大小属性 }), }, geometries: labelGeometries }); let label =self.label let area = self.area let allInfoWindow = []; // console.log(paths,"paths paths paths") let paths0 = JSON.parse(pathStr); paths0.forEach((x,i)=>{ var center = new TMap.LatLng(x.location.lat, x.location.lng);//设置中心点坐标 let infoWindow = new TMap.InfoWindow({ map: map, position: center, //设置信息框位置 enableCustom: true, //不显示关闭按钮 offset: {y: -60, x: 10}, content: `<div class="info_card_project"> <div class="info_card_project_title"> <span class="info_card_project_name">${x.name}</span> <span> <span class="info_card_num marginLeft5">${x.houseArea}</span> <span>㎡</span> </span> </div> </div>` //设置信息框内容 }); allInfoWindow.push(infoWindow) }) self.allInfoWindow = allInfoWindow; console.log(self.isChangeZoom,self.watchZoom, self.zoom, "zoom_changed 触发之前"); map.on('zoom_changed', self.streetZoomChange) let selectInfoWindowInfo = ''; //鼠标移入后 保存的弹窗信息 let selectIndex = ''; //鼠标移入后 保存的弹窗信息的下标 area.on('mouseover', (v) => { // console.log(v, " ffffffff44444444444444444444444444") selectIndex = v.detail.area.i; selectInfoWindowInfo = allInfoWindow[selectIndex].content allInfoWindow[selectIndex].setContent(`<div class="info_card"> <div class="info_card_title">${v.detail.area.name}</div> <div> <span>房屋数量 : </span> <span class="info_card_num">${v.detail.area.houseCount}</span> <span>处</span> </div> <div> <span>可租赁面积 : </span> <span class="info_card_num">${v.detail.area.houseArea}</span> <span>㎡</span> </div> <div> <span>租金单价 : </span> <span class="info_card_num">${v.detail.area.rentDayPrice}</span> <span>元/㎡/天</span> </div> </div>`); }); area.on('mouseout', (v) => { allInfoWindow[selectIndex].setContent(selectInfoWindowInfo); // console.log(v, " mous2233333eout mouseout ") }); area.on('click', (v) => { // console.log(v, "街道8") // console.log(map.getBounds(), "getBounds() getBounds()11111111112222222234324354354656577888") if(v.detail.area){ // console.log(v.detail.area.name,"vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv") let areaName = v.detail.area.name; self.areaName= areaName; //原本地图销毁 // $("#container").empty(); // map.destroy(); this.initMapProject() }else{ self.areaName = '' } }); }, //显示各项目 zoom 15 watch15 initMapProject() { let self = this; let map = this.mapView; self.clearMap(); this.zoom = 15; console.log(self.isChangeZoom ,'刚进来') map.setZoom(this.zoom); // 获取各街道项目数据 let params= { mapAreaType : 'project', // positionCityArea : '徐汇区', // positionStreet : '徐家汇街道' houseCityArea: '徐汇区', street : '徐家汇街道' } let url = prefixctx + "gzwhouse/mapDataDeal/searchGzwHouseListToMap" let obj = this.getData(url, 'post',params) // console.log(obj, "显示各项目 显示各项目 显示各项目") let arr = obj.project //定义地图中心点坐标 默认取第一条 没数据用徐汇政府做中心点 let center = new TMap.LatLng(31.208057, 121.444353) if(arr && arr.length>0){ center = new TMap.LatLng(arr[0].latData, arr[0].lngData) } map.setCenter(center); let geometriesData = []; // 有问题 projectId不能为空 for (let i = 0; i < arr.length; i++) { let houseId = 'houseId' + i ;//测试用 let latData = arr[i].latData; let lngData = arr[i].lngData; let itemObj = { "id": houseId, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id "styleId": 'myStyle', //指定样式 id "position": new TMap.LatLng(latData, lngData), //点标记坐标位置 "properties": {//自定义属性 "itemData": arr[i], 'xb':i,//下标 } }; geometriesData.push(itemObj) } //console.log("geometriesData",geometriesData); //创建并初始化 MultiMarker let markerLayer = new TMap.MultiMarker({ map: map, //指定地图容器 //样式定义 styles: { //创建一个 styleId 为"myStyle"的样式（styles 的子属性名即为 styleId） "myStyle": new TMap.MarkerStyle({ "width": 65, // 点标记样式宽度（像素） "height": 65, // 点标记样式高度（像素） // "src": '/img/waringIcon5.png', //图片路径 "src": '/img/jzw.png', //图片路径 //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点 "anchor": {x: 16, y: 32} }) }, //点标记数据数组 geometries: geometriesData }); self.markerLayers = markerLayer; // debugger let allInfoWindow = []; // console.log(geometriesData,"geometriesData geometriesData") geometriesData.forEach((x,i)=>{ var center = new TMap.LatLng(x.position.lat, x.position.lng);//设置中心点坐标 let infoWindow = new TMap.InfoWindow({ map: map, position: center, //设置信息框位置 enableCustom: true, //不显示关闭按钮 offset: {y: -60, x: 10}, content: `<div class="info_card_project"> <div class="info_card_project_title"> <span class="info_card_project_name">${x.properties.itemData.projectName}</span> <span> <span class="info_card_num marginLeft5">${x.properties.itemData.houseArea}</span> <span>㎡</span> </span> </div> <div class="sjxSmall"></div> </div>` //设置信息框内容 }); allInfoWindow.push(infoWindow) }) self.allInfoWindow = allInfoWindow // let infoWindow = null; // let yiruObj = null; // let markerCenter = null; let selectInfoWindowInfo = ''; //鼠标移入后 保存的弹窗信息 let selectIndex = ''; //鼠标移入后 保存的弹窗信息的下标 markerLayer.on('mouseover', (v) => { // console.log(v, "移入 移入 移入移入 99999999999999999999999999"); selectIndex = v.geometry.properties.xb; selectInfoWindowInfo = allInfoWindow[selectIndex].content allInfoWindow[selectIndex].setContent(`<div class="info_card" > <div class="info_card_title"> <img src="/img/sjxfb.png" alt="" class="info_card_img"> <span>${v.geometry.properties.itemData.projectName}</span> </div> <div> <span>房屋数量: </span> <span class="info_card_num">${v.geometry.properties.itemData.houseCount}</span> <span>套</span> </div> <div> <span>可租赁面积 : </span> <span class="info_card_num">${v.geometry.properties.itemData.houseArea}</span> <span>㎡</span> </div> <div> <span>租金单价 : </span> <span class="info_card_num">${v.geometry.properties.itemData.rentDayPrice}</span> <span>元/㎡/天</span> </div> <div class="sjx"></div> </div>`); }); markerLayer.on('mouseout', (v) => { // console.log(v,"离开 离开 离开 离开 离开 离开") allInfoWindow[selectIndex].setContent(selectInfoWindowInfo); }); //监听 marker 点击事件 markerLayer.on('click', (v) => { // console.log(v, "11111111112222222234324354354656577888") // allInfoWindow[selectIndex].setContent(selectInfoWindowInfo); if (v) { // console.log(v.detail.area.name,"vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv") // let areaName = v.detail.area.name; // self.areaName= areaName; //原本地图销毁 // $("#container").empty(); // map.destroy(); this.initMapHome() } else { // self.areaName = '' } }); console.log(self.isChangeZoom , map.getZoom(),"变化前 zoom_changed"); // debugger // map.off('zoom_changed', self.homeZoomChange); map.on('zoom_changed', self.projectZoomChange); // map.on('zoom_changed', (e) => { // // debugger // console.log(self.isChangeZoom ,map.getZoom(), e.zoom,"zoom_changed") // // debugger // if(!this.isChangeZoom && e.zoom > 16){ // this.isChangeZoom = true, // this.watchZoom = 16; // console.log(e.zoom, "项目>16") // } // if(!this.isChangeZoom && e.zoom < 13){ // this.isChangeZoom = true, // this.watchZoom = 12 // console.log(e.zoom, "项目<14") // } // }); }, //显示房屋 zoom 16 17 watch16 initMapHome(id) { // console.log(gzwHouseList, "gzwHouseList gzwHouseList gzwHouseList") // this.arr0= JSON.parse(JSON.stringify(gzwHouseList)) let self = this; let map = this.mapView; self.clearMap(); // 获取各街道项目数据 let params= { mapAreaType : 'house', // positionCityArea : '徐汇区', // positionStreet : '徐家汇街道', houseCityArea : '徐汇区', street : '徐家汇街道', projectName : 'T20' } let url = prefixctx + "gzwhouse/mapDataDeal/searchGzwHouseListToMap"; let obj = this.getData(url, 'post',params); console.log(obj, "获取各街道项目数据 "); // let arr = obj.house; let arr = this.deduplicate(gzwHouseList, 'latData', 'lngData') //测试数据 arr = arr.splice(0,488) console.log(arr,"arrarr 319") // 数组去重 latData lngData // deduplicate(arr, t, x) //定义地图中心点坐标 默认取第一条 没数据用徐汇政府做中心点 var center = new TMap.LatLng(31.153125, 121.441605); if(arr && arr.length>0){ center = new TMap.LatLng(arr[0].latData, arr[0].lngData) } self.zoom = 16; if (id || id == 0) { //测试 center = new TMap.LatLng(arr[id].latData, arr[id].lngData) self.zoom = 17 } map.setZoom(self.zoom); map.setCenter(center); var geometriesData = []; for (var i = 0; i < arr.length; i++) { let houseId = 'houseId' + i ;//测试用 var latData = arr[i].latData; var lngData = arr[i].lngData; var itemObj = {} if (i == id) { itemObj = { "id": houseId, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id "styleId": 'myStyleCenter', //指定样式 id "position": new TMap.LatLng(latData, lngData), //点标记坐标位置 "properties": {//自定义属性 "itemData": arr[i], 'xb':i,//下标 } }; } else { itemObj = { "id": houseId, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id "styleId": 'myStyle', //指定样式 id "position": new TMap.LatLng(latData, lngData), //点标记坐标位置 "properties": {//自定义属性 "itemData": arr[i], 'xb':i,//下标 } }; } geometriesData.push(itemObj) } console.log("geometriesData", geometriesData); //创建并初始化 MultiMarker self.markerLayers = new TMap.MultiMarker({ map: map, //指定地图容器 //样式定义 styles: { //创建一个 styleId 为"myStyle"的样式（styles 的子属性名即为 styleId） "myStyle": new TMap.MarkerStyle({ "width": 35, // 点标记样式宽度（像素） "height": 35, // 点标记样式高度（像素） // "src": '/img/waringIcon5.png', //图片路径 "src": '/img/mapicon.png', //图片路径 //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点 "anchor": {x: 16, y:32} }), //创建一个 styleId 为"myStyle"的样式（styles 的子属性名即为 styleId） "myStyleCenter": new TMap.MarkerStyle({ "width": 40, // 点标记样式宽度（像素） "height": 40, // 点标记样式高度（像素） // "src": '/img/waringIcon5.png', //图片路径 "src": '/img/mapiconblue.png', //图片路径 //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点 "anchor": {x: 16, y: 32} }) }, //点标记数据数组 geometries: geometriesData }); let markerLayer = self.markerLayers; let allInfoWindow = []; geometriesData.forEach((x,i)=>{ var center = new TMap.LatLng(x.position.lat, x.position.lng);//设置中心点坐标 let infoWindow = new TMap.InfoWindow({ map: map, position: center, //设置信息框位置 enableCustom: true, //不显示关闭按钮 offset: {y: -32, x: 10}, content: `<div class="info_card_project" > <div class="info_card_project_title"> <span class="info_card_project_name">南康公寓</span> <span class="info_card_num marginLeft5">16022.73</span> <span>㎡</span> </div> </div>` //设置信息框内容 }); allInfoWindow.push(infoWindow) }) self.allInfoWindow = allInfoWindow; let selectInfoWindowInfo = ''; //鼠标移入后 保存的弹窗信息 let selectIndex = ''; //鼠标移入后 保存的弹窗信息的下标 //监听 marker 点击事件 // markerLayer.on("click", this.clickHandler); // mouseover let infoWindow = null; markerLayer.on('mouseover', (v) => { console.log(v, "7777777777") selectIndex = v.geometry.properties.xb; selectInfoWindowInfo = allInfoWindow[selectIndex].content; allInfoWindow[selectIndex].setContent(`<div class="info_card" > <div class="info_card_title"> <img src="/img/sjxfb.png" alt="" class="info_card_img"> <span>南康公寓</span> </div> <div> <span>可租赁面积: </span> <span class="info_card_num">${v.geometry.properties.itemData.houseArea}</span> <span>㎡</span> </div> <div> <span>租金单价 : </span> <span class="info_card_num">5</span> <span>元/㎡/天</span> </div> </div>`); }); markerLayer.on('mouseout', (v) => { // console.log(v,"离开 离开 离开 离开 离开 离开") allInfoWindow[selectIndex].setContent(selectInfoWindowInfo); }); map.on('zoom_changed', self.homeZoomChange) $(".search").removeClass("displaySearch") }, //显示各区 zoom_changed事件 areaZoomChange(e){ if(!this.isChangeZoom && e.zoom >11){ this.isChangeZoom = true, this.watchZoom = 12 } }, //显示房屋 zoom_changed事件 homeZoomChange(e){ // debugger console.log(e,"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx") if(!this.isChangeZoom && e.zoom <15){ this.isChangeZoom = true, this.watchZoom = 15 } }, //显示各项目 zoom_changed事件 projectZoomChange(e){ if(!this.isChangeZoom && e.zoom > 16){ this.isChangeZoom = true, this.watchZoom = 16; console.log(e.zoom, "项目>16") } if(!this.isChangeZoom && e.zoom < 13){ this.isChangeZoom = true; this.watchZoom = 12; console.log(e.zoom, "项目<14") } }, //显示各社区街道 zoom_changed事件 streetZoomChange(e){ // debugger if(!this.isChangeZoom && e.zoom > 14){ this.isChangeZoom = true, this.watchZoom = 15 console.log(e.zoom, "街道>14") } if(!this.isChangeZoom && e.zoom < 11){ this.isChangeZoom = true, console.log(e.zoom, "街道<11") this.watchZoom = 9.4 } }, //设置style样式工厂函数 setStyles(opacity) { return { fillColor: `rgba(56, 124, 234, 1)`, //设置区域填充颜色 strokeColor: '#ff0000', //设置区域边线颜色 } }, getData(url, type, params) { let obj = {}; //获取下级行政区划 获取各区数据 官方文档https://lbs.qq.com/service/webService/webServiceGuide/search/webServiceDistrict // let urlArea = "https://apis.map.qq.com/ws/district/v1/getchildren?id=310000&key=R7YBZ-J2TW5-LJTIB-ILNXV-WVXXE-2LBO6"; // 获取街道 获取下级行政区划 获取指定行政区划的子级行政区划 本接口支持获取 指定区县（三级）其下乡镇/街道（四级）列表 // 官方文档https://lbs.qq.com/service/webService/webServiceGuide/search/webServiceDistrict // 官方接口 https://apis.map.qq.com/ws/district/v1/getchildren if (type == 'get') { $.ajax({ url: url, type: 'get', async: false, success: function (res) { if (res.code == 0) { obj = res.data } } }); } else { $.ajax({ url: url, type: 'post', data: params, //{ id : 123 } async: false, success: function (res) { if (res.code == 0) { obj = res.data } } }); } return obj }, // let xx= this.deduplicate(arr, 'latData', 'lngData') // 数组去重 latData lngData deduplicate(arr, t, x) { const newArr = [], assignList = [] for (let i = 0; i < arr.length; i++) { if (assignList.indexOf(arr[i][t]) === -1 && assignList.indexOf(arr[i][x]) === -1) { assignList.push(arr[i][t]) newArr.push(arr[i]) } } return newArr }, getTenXunData() { console.log("qqqqqqqqqqqqqqqqqq腾讯数据 腾讯数据") // 通过区id 获取各区的街道 再通过街道id获取街道边界 // 这个接口可以获得徐汇所有街道的id // http://10.204.116.40:10602/ws/district/v1/getchildren?id=310104&get_polygon=1 // 这个接口可以通过街道的id获取经纬度范围 // http://10.204.116.40:10602/ws/district/v1/search?keyword=310104014&get_polygon=1 let self = this; var allData=[] // 上海16个区 let arr=[310101, 310104, 310105, 310106, 310107, 310109, 310110, 310112, 310113, 310114, 310115, 310116, 310117, 310118, 310120, 310151] // let arr=[310104103] arr.forEach(item=>{ let url = `http://10.204.116.40:10602/ws/district/v1/getchildren?id=${item}&get_polygon=1` $.ajax({ url: url, type: 'get', async: false, success: function (res) { // console.log(res,"腾讯数据 腾讯数据") // let arr = res.result; // console.log(arr,"22腾讯数据 腾讯数据") let obj ={} obj.id = item obj.result = res.result allData.push(obj) } }); }) // console.log(allData,"所有街道11数据") this.bj(allData) }, //通过街道数据 获取边界 bj(arr){ let jdid=[]; let self = this; // console.log(arr,"街道数据 ") arr.forEach(item=>{ // self.jdData.push(item) // console.log(item,"itemitemitemitemitemitemitemitemitem") item.result.forEach(t=>{ // console.log(t,"oooooooooooooo") t.forEach(s=>{ this.getBJ(s,t) // console.log(obj,"4444444444444444444444444") jdid.push(s.id) }) }) }) console.log(this.jdData,'77777777777777777777779') }, //获取边界 请求接口 getBJ(s,t) { // console.log(t,"tttttttttttttttttttttttttt") let self =this var obj={} let url=`http://10.204.116.40:10602/ws/district/v1/search?keyword=${s.id}&get_polygon=1` $.ajax({ url: url, type: 'get', async: false, success: function (res) { // console.log(s,"sssssssssssssssss") s.polygon = res.result // console.log(s,"88888888888888888888") self.jdData.push(res.result) } }); }, }, computed: { // enterpriseNameValue() { // // } }, })
5458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
