function resetWin() { document.getElementsByTagName('body')[0].style.height = (window.innerHeight) + 'px'; $("section").height($("body").height() - $("#search").height()); $("#map").height($("body").height() - $("#search").height()); $("#search-input").val(""); } $(function () { resetWin(); full_pos(); //boundaryLabel();//四个风貌区boundary和label }); window.onresize = function () { resetWin(); }; // 百度地图API功能 var pointArray; var map = new BMap.Map("map", { enableMapClick: true, minZoom: 10, maxZoom: 22 }); // 创建Map实例 map.centerAndZoom(new BMap.Point(121.4097683, 31.31586563), 11); var mapStyle = { features: ["road", "building", "water", "land"],//隐藏地图上的poi style: "blue" //设置地图风格为高端黑 } map.setMapStyle({ styleJson: [ { "featureType": "land", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#091220ff" } }, { "featureType": "water", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#113549ff" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#0e1b30ff" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#ffffffb3" } }, { "featureType": "building", "elementType": "geometry.stroke", "stylers": { "color": "#dadadab3" } }, { "featureType": "subwaystation", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#b15454B2" } }, { "featureType": "education", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#e4f1f1ff" } }, { "featureType": "medical", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#f0dedeff" } }, { "featureType": "scenicspots", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#e2efe5ff" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 4 } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#f7c54dff" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#fed669ff" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "highway", "elementType": "labels.text.fill", "stylers": { "color": "#8f5a33ff" } }, { "featureType": "highway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "highway", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "arterial", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 2 } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#ffeebbff" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "arterial", "elementType": "labels.text.fill", "stylers": { "color": "#525355ff" } }, { "featureType": "arterial", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "local", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "local", "elementType": "geometry.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "local", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "local", "elementType": "labels.text.fill", "stylers": { "color": "#979c9aff" } }, { "featureType": "local", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "railway", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "railway", "elementType": "geometry.fill", "stylers": { "color": "#123c52ff" } }, { "featureType": "railway", "elementType": "geometry.stroke", "stylers": { "color": "#12223dff" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "subway", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "subway", "elementType": "geometry.stroke", "stylers": { "color": "#ffffff00" } }, { "featureType": "subway", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "subway", "elementType": "labels.text.fill", "stylers": { "color": "#979c9aff" } }, { "featureType": "subway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "continent", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "continent", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "continent", "elementType": "labels.text.fill", "stylers": { "color": "#333333ff" } }, { "featureType": "continent", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "city", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "city", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "city", "elementType": "labels.text.fill", "stylers": { "color": "#454d50ff" } }, { "featureType": "city", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "town", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "town", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "town", "elementType": "labels.text.fill", "stylers": { "color": "#454d50ff" } }, { "featureType": "town", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "road", "elementType": "geometry.fill", "stylers": { "color": "#12223dff" } }, { "featureType": "poilabel", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "districtlabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "road", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "road", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": { "color": "#ffffff00" } }, { "featureType": "district", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "poilabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "poilabel", "elementType": "labels.text.fill", "stylers": { "color": "#2dc4bbff" } }, { "featureType": "poilabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffff00" } }, { "featureType": "manmade", "elementType": "geometry", "stylers": { "color": "#12223dff" } }, { "featureType": "districtlabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "entertainment", "elementType": "geometry", "stylers": { "color": "#ffffffff" } }, { "featureType": "shopping", "elementType": "geometry", "stylers": { "color": "#12223dff" } } ] }); map.enableScrollWheelZoom(true); var defaultLabelStyle = { color: "#FFF", fontSize: "12px", width: "auto", padding: "2px 5px 3px 5px", fontFamily: "微软雅黑", border: "none", borderRadius: "3px", backgroundColor: "rgb(26, 26, 23)" }; /* var boundary_cnhpas = []; boundary_cnhpas.push({"name":"新华路风貌区","center":"121.4328285,31.208473","polygon":"121.436682,31.209639;121.436143,31.206226;121.433017,31.205037;121.431688,31.206241;121.430825,31.206705;121.428975,31.207647;121.429712,31.210535;121.430125,31.211909;121.431867,31.21106;121.434814,31.210071;121.436682,31.209639"}); boundary_cnhpas.push({"name":"豫园路风貌区","center":"121.431706,31.2260875","polygon":"121.438129,31.224374;121.439153,31.224466;121.440195,31.224713;121.441201,31.224605;121.442944,31.224914;121.443339,31.225393;121.442566,31.227246;121.442153,31.229685;121.441902,31.230364;121.44183,31.231476;121.440788,31.232233;121.438614,31.230951;121.437491,31.230735;121.436889,31.230588;121.436422,31.230357;121.435595,31.229399;121.434149,31.230534;121.431122,31.227415;121.429092,31.229268;121.427322,31.230781;121.427933,31.231484;121.42822,31.23204;121.427403,31.231391;121.426415,31.231198;121.425624,31.231592;121.424295,31.232858;121.422983,31.233985;121.422157,31.23451;121.421833,31.234494;121.421618,31.234216;121.421887,31.233599;121.422588,31.232302;121.422606,31.231731;121.422696,31.230758;121.422175,31.229986;121.420073,31.228905;121.421672,31.225864;121.424115,31.226049;121.424349,31.225941;121.423989,31.224551;121.42672,31.225107;121.42814,31.225045;121.428427,31.223285;121.429002,31.222158;121.429487,31.219317;121.429667,31.217665;121.434446,31.218638;121.435685,31.218993;121.436745,31.219085;121.437194,31.218916;121.437913,31.219641;121.439548,31.220537;121.43829,31.223872;121.438129,31.224374"}); boundary_cnhpas.push({"name":"虹桥路风貌区","center":"121.3848725,31.2011445","polygon":"121.399605,31.202975;121.400234,31.20106;121.404689,31.202103;121.404617,31.202859;121.405336,31.206288;121.40627,31.209083;121.401779,31.209654;121.397808,31.209546;121.391017,31.209268;121.388376,31.209299;121.38728,31.209623;121.38304,31.211276;121.381351,31.208712;121.380651,31.207446;121.378872,31.203029;121.378171,31.202288;121.377093,31.201886;121.374758,31.201114;121.373608,31.202211;121.37244,31.20377;121.372207,31.204404;121.369242,31.204203;121.367248,31.204203;121.363475,31.204435;121.363655,31.202489;121.363601,31.199755;121.36405,31.195832;121.364355,31.192496;121.366439,31.191646;121.368506,31.191214;121.370392,31.191013;121.375063,31.192434;121.387532,31.196326;121.391107,31.197855;121.395491,31.200481;121.399605,31.202975"}); boundary_cnhpas.push({"name":"衡复风貌区","center":"121.442683,31.2151825","polygon":"121.445046,31.221699;121.445405,31.221158;121.445908,31.220618;121.445621,31.21963;121.444956,31.21875;121.443806,31.217885;121.442872,31.217483;121.44147,31.217468;121.44262,31.214704;121.443734,31.21211;121.444291,31.210318;121.44156,31.208666;121.44086,31.209608;121.440285,31.21143;121.440033,31.211739;121.439548,31.214256;121.439458,31.215461;121.440051,31.216557;121.44077,31.217437;121.440051,31.219259;121.441399,31.220047;121.441686,31.219877;121.443213,31.220803;121.445046,31.221699"}); //四个风貌区boundary和label function boundaryLabel(){ for (var i = 0 ; i < boundary_cnhpas.length;i++){ var boundary_cnhpa_temp = new BMap.Polygon(boundary_cnhpas[i].polygon, { strokeWeight : 1, strokeStyle:'dashed', strokeColor : '#000', fillColor:'rgba(101,181,241,0.2)', enableMassClear:false }); // 建立多边形覆盖物 map.addOverlay(boundary_cnhpa_temp); // 添加覆盖物 var tmp_plng_lat = boundary_cnhpas[i].center; var point_tmp = tmp_plng_lat.split(','); var label_position_opts = { position : new BMap.Point(point_tmp[0]*1, point_tmp[1]*1), offset : new BMap.Size(20, 20) //设置文本偏移量 } var label = new BMap.Label(boundary_cnhpas[i].name, label_position_opts); // 创建文本标注对象 label.setStyle(defaultLabelStyle); map.addOverlay(label); } } */ //var shanghai_boundary defined in shanghai_boundary.js var shanghai_polygon = new BMap.Polygon(shanghai_boundary, { strokeWeight: 2, strokeStyle: 'dashed', strokeColor: "#fff", strokeOpacity: '1', fillColor: '', enableMassClear: false }); // 建立多边形覆盖物 map.addOverlay(shanghai_polygon); // 添加上海边界覆盖物 var bottom_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }); // 右下角 map.addControl(bottom_right_navigation); map.addEventListener("zoomend", checkLevel);//缩放监听事件 //显示全部定位 function full_pos() { // $.post(basePath + "json/terminal.json", null, function (data) { // AddPoints(data); // }, "json"); $.getJSON("json/terminal.json", function (result) { AddPoints(result); }); console.log('success'); } var toast = new auiToast();//右上角控件声明 var layer_load; //顶部搜索控件 var searchBar = document.querySelector(".aui-searchbar"); var searchBarInput = document.querySelector(".aui-searchbar input"); var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn"); var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn"); if (searchBar) { searchBarInput.onclick = function () { searchBarBtn.style.marginRight = 0; } searchBarInput.oninput = function () { if (this.value.length) { searchBarClearBtn.style.display = 'block'; searchBarClearBtn.style.color = '#FFF'; searchBarBtn.textContent = "搜索"; } else { searchBarClearBtn.style.display = 'none'; searchBarBtn.classList.remove("aui-text-info"); searchBarBtn.textContent = "取消"; } } } searchBarClearBtn.onclick = function () { this.style.display = 'none'; searchBarInput.value = ''; searchBarBtn.classList.remove("aui-text-info"); searchBarBtn.textContent = "取消"; full_pos();//清空搜索框返回原本的结果 } searchBarBtn.onclick = function () { var keywords = searchBarInput.value; if (keywords.length) { searchBarInput.blur(); search_text();//点击搜索 } else { this.style.marginRight = "-" + this.offsetWidth + "px"; searchBarInput.value = ''; searchBarInput.blur(); } } //搜索框功能 function search_text() { var val = $("#search-input").val(); toast.loading({ title: "加载中" }, function () { $.get(basePath + "wechat_search_text", "text=" + val, function (data) { AddPoints(data); }, "json"); }); } //地图缩放触发 function checkLevel() { if (map.getZoom() > 18) { //changning_polygon.hide(); labels.forEach(function (marker) { marker.show(); }); } else { //changning_polygon.show(); labels.forEach(function (marker) { marker.hide(); }); } } var terminal_status_0 = new BMap.Icon("./image/device.png", new BMap.Size(32, 32)); var terminal_status_1 = new BMap.Icon("./image/device.png", new BMap.Size(32, 32)); var terminal_status_2 = new BMap.Icon("./image/device.png", new BMap.Size(32, 32)); var terminal_status_3 = new BMap.Icon("./image/tower.png", new BMap.Size(32, 32)); var markerClusterer;// 点聚合对象 var markers = [];// 点集合数组 var labels = [];//点label var pos_data = [];//单个点的信息, var full_point = {};//全部点的集合,搜周边功能筛选 var layer_bot; var marker_labelStyle = { width: "90px", height: "20px", border: "none", background: "none", boxShadow: "0 4px 12px rgba(255,255,255,0.4)", borderRadius: "4px", overflow: "hidden" } function AddPoints(rows) { full_point = rows; point_circle = []; if (rows.length == 0) { layer.close(layer_load); alert("无可加载地点"); } else { //console.log(rows) map.removeOverlay(); markers = []; for (var i = 0; i < rows.length; i++) { var point_zhi = new BMap.Point(rows[i].b_x, rows[i].b_y); var marker = new BMap.Marker(point_zhi, { icon: getMarker_icon(rows[i].status) }); marker.id = rows[i].id; marker.attributes = rows[i];//传单个点 var mlabel_pos = { position: point_zhi, offset: new BMap.Size(-45, -35) } var label = new BMap.Label("
" + split_str(rows[i].name) + "
", mlabel_pos); // 创建文本标注对象 label.setStyle(marker_labelStyle); map.addOverlay(label); //var infoWindow = new BMap.InfoWindow(sContent,{width : 600, height: 500,title : split_str(rows[i].id)+" -- "+split_str(rows[i].name)+" -- "+getMarker_status_String(rows[i].status) }); //marker.addEventListener("click",function () { // this.openInfoWindow(infoWindow); //}); marker.addEventListener("click", bot_msg); map.addOverlay(marker) markers.push(marker); labels.push(label); } map.setViewport(pointArray); /* if (rows.length <= 10) { map.centerAndZoom(new BMap.Point(rows[0].b_x, rows[0].b_y), 17); } else { map.setViewport(pointArray); } if (markerClusterer) { markerClusterer.clearMarkers(); }; markerClusterer = new BMapLib.MarkerClusterer(map, { markers : markers, girdSize : 200, minClusterSize : 4 }); */ } labels.forEach(function (marker) { marker.hide(); }); layer.close(layer_load); setTimeout(function () { $(".cover").fadeOut("fast"); }, 1000) toast.hide(); } function getMarker_icon(status) { if (status == 0) { return terminal_status_0; } else if (status == 1) { return terminal_status_1; } else if (status == 2) { return terminal_status_2; } else if (status == 3) { return terminal_status_3; } return terminal_status_3; } function getMarker_status_String(status) { if (status == 0) { return "正常状态"; } else if (status == 1) { return "异常状态"; } else if (status == 2) { return "失联状态"; } else if (status == 3) { return "未知状态"; } return "未知状态"; } function split_str(a) { console.log('a:'+a); if (a == "null" || a == null) { return "无"; } else if (a.split("(")[0] != "") { return a.split("(")[0]; } else { return a; } } function clear_animation(){ markers.forEach(function (marker) { marker.setAnimation(); }); } function bot_msg(e) { resetWin(); attr = e.target.attributes; pos_data = attr; var point = new BMap.Point(e.target.point.lng, e.target.point.lat - 0.1); map.centerAndZoom(point, map.getZoom()); $("#area_").attr("data", JSON.stringify(attr)); $("#area_").attr("id_", attr.id); $("#popup_title").html(attr.id + " -- " + split_str(attr.name) + " -- " + getMarker_status_String(attr.status)); var box = $("#area").html(); layer.close(layer_bot); clear_animation() // stop all marker's BOUNCE e.target.setAnimation(BMAP_ANIMATION_BOUNCE) layer_bot = layer.open({ type: 1, content: box, anim: 'up', shade: false, style: 'position:absolute; bottom:30px; left:400px; width: 600px; height: 350px;border:none;overflow:hidden;text-indent:2em;' }); } var point_c = new BMap.Point(116.244173, 39.973415); var circle = new BMap.Circle(point_c, 500, { strokeColor: "#65B5F1", strokeWeight: 1, strokeOpacity: 0.1, fillColor: "#65B5F1", fillOpacity: 0.3 }); //创建圆,允许编辑 map.addOverlay(circle); //circle.hide(); function change(val) { resetWin(); $(".range_box").show(); $(".around_num").html(val); var point = new BMap.Point(pos_data.b_x, pos_data.b_y); circle.setCenter(point); circle.setRadius(val); markers_reset(); map.centerAndZoom(point, map.getZoom()); } function close_bot() { /* layer_load = layer.open({ type: 2, content: '请稍后' }); circle.setCenter(point_c); */ layer.close(layer_bot); clear_animation() // stop all marker's BOUNCE /* $(".range_box").hide(); $.get(basePath + "wechat_search_condition", pageQueryparams, function (data) { AddPoints(data); }, "json"); */ } //marker reset function markers_reset() { markerClusterer.clearMarkers(); markers = []; for (var i = 0; i < full_point.length; i++) { var point_zhi = new BMap.Point(full_point[i].b_x, full_point[i].b_y); if (BMapLib.GeoUtils.isPointInCircle(point_zhi, circle)) { var marker = new BMap.Marker(point_zhi, { icon: iconNew1 }); marker.id = full_point[i].id; marker.attributes = full_point[i]; marker.addEventListener("click", bot_msg); markers.push(marker); } } markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers, girdSize: 200, minClusterSize: 4 }); } //右上角定位 function positioning() { resetWin(); $(".range_box").hide(); layer_load = layer.open({ type: 2, content: '加载中' }); map.centerAndZoom(new BMap.Point(121.4071683, 31.22786563), 13); map.clearOverlays(); //changning_polygon.show(); //boundaryLabel(); full_pos(); } //底部框的导航 function search_leader() { sessionStorage.setItem("leaderData", JSON.stringify(pos_data)); window.location.href = sysPath + "cn_wechat/leader.html?end_place=" + $("#msg_house").html(); } //此处传id参数,到幢详情 function showHouse() { var data = $("#area_").attr("data"); var id_ = $("#area_").attr("id_"); localStorage.setItem("data", data); window.location.href = "houseDetail.html?id_=" + id_; } function showChart() { window.location.href = "chart.html"; } //筛选条件框的关闭和显示 function showChoose() { if ($("#slidemenu").is(":hidden")) { $("#slidemenu").animate({ right: '0%', opacity: 'show' }, 200, function () { $("#slidemenu").show(); }); } else { $("#slidemenu").animate({ right: '-30%', opacity: 'hide' }, 200, function () { $("#slidemenu").hide(); }); } } //左上角控件 var popup = new auiPopup(); function showPopup() { popup.init({ frameBounces: true,//当前页面是否弹动,(主要针对安卓端) location: 'top-left',//位置,top(默认:顶部中间),top-left top-right,bottom,bottom-left,bottom-right buttons: [{ image: './icon/nearby.png', text: '建筑列表', value: 'zl'//可选 }, { image: './icon/stastic.png', text: '统计分析', value: 'wx'//可选 }, { image: './icon/filter.png', text: '条件筛选', value: 'wx-circle' }], }, function (ret) { if (ret.buttonIndex == 1) { window.location.href = "buildingList.html"; } else if (ret.buttonIndex == 2) { showChart(); } else { showChoose(); } }) } var pageQueryparams = { lb_: '',//保护类别 dj_: '',//等级 pc_: ''//批次 } //筛选条件的操作 function change_map() { layer_load = layer.open({ type: 2, content: '加载中' }); var pc_str = "(", dj_str = "(", lb_str = "("; var pc_num = 0, dj_num = 0, lb_num = 0; var pc = document.getElementsByName("pc"); var dj = document.getElementsByName("dj"); var lb = document.getElementsByName("lb"); for (var i = 0; i < pc.length; i++) { if (pc[i].checked) { pc_str += "'" + pc[i].value + "'" + ","; pc_num += 1; } } for (var i = 0; i < dj.length; i++) { if (dj[i].checked) { dj_str += "'" + dj[i].value + "'" + ","; dj_num += 1; } } for (var i = 0; i < lb.length; i++) { if (lb[i].checked) { lb_str += "'" + lb[i].value + "'" + ","; lb_num += 1; } } if (pc_str.substring(pc_str.length - 1, pc_str.length) == ",") { pc_str = pc_str.substring(0, pc_str.length - 1); } if (dj_str.substring(dj_str.length - 1, dj_str.length) == ",") { dj_str = dj_str.substring(0, dj_str.length - 1); } if (lb_str.substring(lb_str.length - 1, lb_str.length) == ",") { lb_str = lb_str.substring(0, lb_str.length - 1); } pc_str += ")"; dj_str += ")"; lb_str += ")"; if (pc_num == pc.length || pc_num == 0) { pc_str = ''; } if (dj_num == dj.length || dj_num == 0) { dj_str = ''; } if (lb_num == lb.length || lb_num == 0) { lb_str = ''; } pageQueryparams.pc_ = pc_str; pageQueryparams.dj_ = dj_str; pageQueryparams.lb_ = lb_str; $.get(basePath + "wechat_search_condition", pageQueryparams, function (data) { AddPoints(data); }, "json"); } function watchVR() { var id = $("#area_").attr("id_"); event.stopPropagation(); window.open(proPath + "vtour_" + id + "/index.html"); }