1 @{
2 ViewBag.Title = "GIS地图";
3 Layout = null;
4 }
5
6 @model HFSoft.Plat.UIWeb.Models.MapShowDataVO
7
8 <style>
9 body, html, #allmap { width: 100%;height: 100%;overflow: hidden;margin: 0;}
10
11 table {width: 100%;border-collapse: collapse; border: 1px #b8b8bf solid; }
12 table tr td{ border: 1px #b8b8bf solid;height:22px;}
13 table tr th{ border: 1px #b8b8bf solid; height:22px;line-height:22px;text-align:center;font-weight:normal;}
14 .tabPanel {width:480px;height:280px;}
15 .tabPanel ul {height: 30px;border-bottom: 1px solid #aaa;}
16 .tabPanel ul li {list-style-type:none;float: left;margin: 0 2px 0 0;border: 1px solid #aaa;height: 29px;line-height: 30px;width:80px;text-align: center;cursor:pointer;
17 text-shadow: 0 1px 0 #fff;border-radius: 4px 4px 0 0;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);background: #ddd;background: -moz-linear-gradient(top, #eee, #ddd);
18 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
19 }
20 .tabPanel .hit {border-bottom: 1px solid #fff;cursor: pointer;color: black;text-shadow: 0 1px 0 #fff;
21 background: #fff;
22 background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));
23 background: -moz-linear-gradient(top, #e1e1e1, #fff);
24 }
25 .pane {border: 0px solid #aaa;border-top: 0;min-height: 100px; background-color: #fff;display: none;}
26 .pane p {padding:0px;}
27 </style>
28
29
30 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=@(Model.MapBaseInfoItem.ApiAk)"></script>
31
32 <div class="easyui-layout" style="width: 100%; height: 100%;">
33 <div id="allmap" style="fit:fill"></div>
34 </div>
35 <script type="text/javascript">
36 var v_ZoomLevel = "@(Model.MapBaseInfoItem.ZoomLevel.ToString())";
37 var v_CityName = "@(Model.MapBaseInfoItem.CityName)";
38 var v_Lng = "@(Model.MapBaseInfoItem.Longitude)";
39 var v_Lat = "@(Model.MapBaseInfoItem.Latitude)";
40 var v_StationID = "@ViewBag.StationID";
41
42 // 百度地图API功能
43 var map = new BMap.Map("allmap");// 创建Map实例
44 map.centerAndZoom(new BMap.Point(v_Lng, v_Lat), v_ZoomLevel); // 初始化地图,设置中心点坐标和地图级别 // 初始化地图,设置中心点坐标和地图级别
45 var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
46 map.addControl(top_left_navigation);
47 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
48 map.setCurrentCity(v_CityName); // 设置地图显示的城市 此项是必须设置的
49 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
50
51 //从后台将要显示的数据变到JSON变量中
52 var viewMapModel = {
53 id: 1,
54 StationData: [
55 @if (Model != null)
56 {
57 var List = Model.StationList;
58 for (int i = 0; i < List.Count; i++)
59 {
60 var item = List[i];
61 if (i != List.Count - 1)
62 {
63 @:{ StationID: '@item.StationID', StationName: '@item.StationName', Longitude: '@item.Longitude', Latitude: '@item.Latitude', ReservoirName: '@item.ReservoirName', LinkMan: '@item.Linkman', MobilePhone: '@item.MobilePhone', Addresses: '@item.Addresses', Remark: '@item.Remark' },
64 }
65 else
66 {
67 @:{ StationID: '@item.StationID', StationName: '@item.StationName', Longitude: '@item.Longitude', Latitude: '@item.Latitude', ReservoirName: '@item.ReservoirName', LinkMan: '@item.Linkman', MobilePhone: '@item.MobilePhone', Addresses: '@item.Addresses', Remark: '@item.Remark' }
68 }
69 }
70 }
71 ],
72 GateData: [
73 @if (Model != null)
74 {
75 var GateList = Model.GateList;
76 for (int i = 0; i < GateList.Count; i++)
77 {
78 var item = GateList[i];
79 if (i != GateList.Count - 1)
80 {
81 @:{},
82 }
83 else
84 {
85 @:{}
86 }
87 }
88 }
89 ]
90 };
91
92 var markers = [];
93 var stationItem = null;
94
95 $(document).ready(function () {
96 pointMapSite();
97 if (markers.length > 0) {
98 for (var j = 0; j < markers.length; j++) {
99 showInfo(markers[j], stationItem);
100 break;
101 }
102 }
103 });
104
105 function pointMapSite() {
106 if (viewMapModel != null && viewMapModel.StationData.length > 0) {
107
108 for (var i = 0; i < viewMapModel.StationData.length; i++) {
109 var stationid = viewMapModel.StationData[i].StationID;
110 var stationname = viewMapModel.StationData[i].StationName;
111 var Longitude = viewMapModel.StationData[i].Longitude;
112 var Latitude = viewMapModel.StationData[i].Latitude;
113
114 var mkr = new BMap.Marker(new BMap.Point(Longitude, Latitude));
115
116 map.addOverlay(mkr);
117
118 if (v_StationID == stationid) {
119 markers.push(mkr);
120 stationItem = viewMapModel.StationData[i];
121 }
122
123
124 //给标注点添加点击事件。使用立即执行函数和闭包
125 (function () {
126 var StationModel = viewMapModel.StationData[i];
127 mkr.addEventListener("click", function () {
128 showInfo(this, StationModel);
129 });
130 })();
131 }
132 }
133 }
134
135 function showInfo(thisMaker, item) {
136 var sContent = '<div class="tabPanel">'
137 + '<ul>'
138 + '<li id="tab1" class="hit" onclick=\'javascript:showTab(1);\'></li>'
139 + '<li id="tab2" onclick=\'javascript:showTab(2);\'></li>'
140 + '<li id="tab3" onclick=\'javascript:showTab(3);\'></li>'
141 + '</ul>'
142 + '<div class="panes">'
143 + '<div class="pane" style="display:block;"><p>'
144 + '<table>'
145 + '<tr>'
146 + '<td style="text-align:right;padding:5px;width:80px;">：</td>'
147 + '<td>' + item.StationName + '</td>'
148 + '<td rowspan="5" style="width:100px;">'
149 + '<img src="/Content/images/noimage.png" style="width:160px;height:160px;" />'
150 + '</td>'
151 + '</tr>'
152 + '<tr>'
153 + '<td style="text-align:right;padding:5px;">：</td>'
154 + '<td>' + item.ReservoirName + '</td>'
155 + '</tr>'
156 + '<tr> '
157 + '<td style="text-align:right;padding:5px;">：</td>'
158 + '<td>' + item.LinkMan + '</td>'
159 + '</tr>'
160 + '<tr>'
161 + '<td style="text-align:right;padding:5px;">：</td>'
162 + '<td>' + item.MobilePhone + '</td>'
163 + '</tr> '
164 + '<tr>'
165 + '<td style="text-align:right;padding:5px;">：</td>'
166 + '<td>' + item.Addresses + '</td> '
167 + '</tr>'
168 + '<tr>'
169 + '<td style="text-align:right;padding:5px;">：</td>'
170 + '<td colspan="2">' + item.Remark + '</td>'
171 + '</tr>'
172 + '</table>'
173 + '</p></div>'
174 + '<div class="pane"><p>2</p></div>'
175 + '<div class="pane"><p>3</p></div>'
176 + '</div>'
177 + '</div>';
178
179 var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
180 thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
181 }
182
183 function showTab(id) {
184 $('#tab' + id).addClass('hit').siblings().removeClass('hit');
185 $('.panes>div:eq(' + (id - 1) + ')').show().siblings().hide();
186 }
