Ver Código Fonte

热点地图

miaofuhao 6 anos atrás
pai
commit
242c7e0ba7
1 arquivos alterados com 118 adições e 15 exclusões
  1. 118 15
      WebUI/CallCenterWeb.UI/Business/spotDist.html

+ 118 - 15
WebUI/CallCenterWeb.UI/Business/spotDist.html

@@ -123,23 +123,23 @@
123 123
 								<div class="toolLeft">
124 124
 									<td colspan="7">
125 125
 			                            <select class="select_" id="sourcearea">
126
-			                            	<option value="睢阳区">睢阳区</option>
127
-			                            	<option value="梁园区">梁园区</option>
128
-			                            	<option value="永城市">永城市</option>
129
-			                            	<option value="民权县">民权县</option>
130
-			                            	<option value="睢县">睢县</option>
131
-			                            	<option value="宁陵县">宁陵县</option>
132
-			                            	<option value="柘城县">柘城县</option>
133
-			                            	<option value="虞城县">虞城县</option>
134
-			                            	<option value="夏邑县">夏邑县</option>
135
-			                            	<option value="城乡一体化示范区">城乡一体化示范区</option>
126
+			                            	<option value="请选择">请选择</option>
127
+			                            	<option value="睢阳区">浉河区</option>
128
+			                            	<option value="梁园区">平桥区</option>
129
+			                            	<option value="永城市">潢川县</option>
130
+			                            	<option value="民权县">光山县</option>
131
+			                            	<option value="睢县">息县</option>
132
+			                            	<option value="宁陵县">新县</option>
133
+			                            	<option value="柘城县">罗山县</option>
134
+			                            	<option value="虞城县">商城县</option>
135
+			                            	<option value="夏邑县">淮滨县</option>
136
+			                            	<option value="城乡一体化示范区">固始县</option>
136 137
 			                            </select>
137 138
 			                        </td>
138
-									<button class="btns search_1">查询</button>
139 139
 								</div>
140 140
 							</div>
141
-							<div style="width:710px">
142
-				                <div id="myMap" style="width:100%;height:400px;"></div>
141
+							<div style="width:1000px">
142
+				                <div id="allmap" style="width:100%;height:400px;"></div>
143 143
 				                <input type="hidden" class="store_Lng" value="115.659773"/>
144 144
         						<input type="hidden" class="store_Lat" value="34.395449" />
145 145
 				            </div>
@@ -148,8 +148,111 @@
148 148
 				</div>
149 149
 			</div>
150 150
 		</div>
151
-		<script src="https://api.map.baidu.com/api?v=2.0&ak=ZG4gLQZUD6Eq1K11cqlYAR4by8CKgLyu&callback=mapinit"></script>
152
-		<script src="../js/appeal/spotIndex.js"></script>
151
+		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SyRux96r0i0Xue1Qqp0ZPb4uCc8BC6Aw"></script>
152
+		<!-- <script src="spotIndex.js"></script> -->
153
+		<script>
154
+			// 百度地图API功能
155
+			
156
+			var map = new BMap.Map("allmap");
157
+			var point = new BMap.Point(114.090325, 32.129247);
158
+			map.centerAndZoom(point, 15);
159
+			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
160
+			var json_data = [
161
+				[114.106931,32.153136],
162
+				[114.106904,32.152269],
163
+				[114.104631,32.15241],
164
+				[114.096677,32.151925],
165
+				[114.071201,32.146407],
166
+				[114.061751,32.146285],
167
+				[114.04709,32.13592],
168
+				[114.062541,32.122772],
169
+				[114.069512,32.155058],
170
+				[114.016476,32.174376],
171
+				[114.267858,32.162272],
172
+				[114.098473,31.874672],
173
+				[114.185214,31.885894],
174
+				[114.12563,32.101043],
175
+				[114.162792,32.407023],
176
+				[114.052408,32.355308],
177
+				[113.967249,32.30216],
178
+				[114.44486,32.2513],
179
+				[114.333326,32.311864],
180
+				[114.562143,32.10069],
181
+				[114.525061,32.198517],
182
+				[114.52233,32.216482],
183
+				[114.543602,32.206583],
184
+				[114.513994,32.222713],
185
+				[114.516293,32.096041]
186
+			];
187
+			var pointArray = new Array();
188
+
189
+			var opts = {
190
+				width: 250, // 信息窗口宽度
191
+				height: 80, // 信息窗口高度
192
+				title: "", // 信息窗口标题
193
+				enableMessage: true //设置允许信息窗发送短息
194
+			};
195
+			$('#sourcearea').change(function(obj) {
196
+				if($('#sourcearea').val() == "") {
197
+					alert("请选择省市区");
198
+					return;
199
+				}
200
+				var address = '河南省信阳' + $('#sourcearea').find("option:selected").text();;
201
+				//var address = '河南省商丘市睢阳区'
202
+				if(address != "") {
203
+					var city = '商丘市';
204
+					// 创建地址解析器实例
205
+					 var myGeo = new BMap.Geocoder();
206
+					myGeo.getPoint(address, function(point) {
207
+						if(point) {
208
+							//定位到区 ,级别显示12
209
+							map.centerAndZoom(point, 12);
210
+							//删除选点
211
+							map.clearOverlays();
212
+							for(var i = 0; i < json_data.length; i++) {
213
+								var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
214
+								map.addOverlay(marker); //增加点
215
+								pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
216
+								var content = json_data[i][2];
217
+								addClickHandler(content, marker);
218
+				
219
+							}
220
+						} else {
221
+							// alert("您选择地址没有解析到结果!");
222
+						}
223
+					}, city);
224
+				}
225
+			});
226
+			for(var i = 0; i < json_data.length; i++) {
227
+				var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
228
+				map.addOverlay(marker); //增加点
229
+				pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
230
+				var content = json_data[i][2];
231
+				addClickHandler(content, marker);
232
+
233
+			}
234
+			//让所有点在视野范围内
235
+			map.setViewport(pointArray);
236
+
237
+			function addClickHandler(content, marker) {
238
+				marker.addEventListener("click", function(e) {
239
+					openInfo(content, e)
240
+				});
241
+			}
242
+
243
+			function openInfo(content, e) {
244
+				var p = e.target;
245
+				var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
246
+				var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
247
+				map.openInfoWindow(infoWindow, point); //开启信息窗口
248
+			}
249
+
250
+			//移动到某一坐标点
251
+			function to(x, y) {
252
+				map.panTo(new BMap.Point(x, y));
253
+
254
+			}
255
+		</script>
153 256
 	</body>
154 257
 
155 258
 </html>