map-city.html
9.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<title>地图显示</title>
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-migrate-1.1.1.min.js"></script><!--
<script type="text/javascript" src="mapapi3.8.6.js"></script>-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><!--
<script type="text/javascript" src="polygon.js"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
// 本地地图服务地址
var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"
function LocalMapType() {}
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 16; //地图显示最大级别
LocalMapType.prototype.minZoom = 4; //地图显示最小级别
LocalMapType.prototype.name = "本地";
LocalMapType.prototype.alt = "显示本地地图数据";
LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");
img.style.width = this.tileSize.width + "px";
img.style.height = this.tileSize.height + "px";
img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
return img;
};
var localMapType = new LocalMapType();
var map, infoWindow = new google.maps.InfoWindow();
// 初始化地图
function initialize() {
var myOptions = {
zoom: 10,//7,
minZoom: 7,
maxZoom: 18,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: [
//google.maps.MapTypeId.ROADMAP,
//google.maps.MapTypeId.HYBRID,
//google.maps.MapTypeId.SATELLITE,
//google.maps.MapTypeId.TERRAIN,
//'locaMap' //定义地图类型
]
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set('locaMap', localMapType); //绑定本地地图类型
//map.setMapTypeId('locaMap'); //指定显示本地地图
var city = "文登市";
new BMap.Boundary().get(city, function(rs){
var data = rs.boundaries + "";
//$.get("data/" + encodeURIComponent(city) + ".dat", function(data){
if (data != ''){
var latLngs = data.split(";"); // 拆分坐标
var top=0, bottom=0, left=0, right=0; // 四周最外坐标
var triangleCoords = []; // 经纬度坐标数组
for (j = 1; j < latLngs.length - 1; j++) {
var postion = latLngs[j].indexOf(",");
var lng = parseFloat(latLngs[j].substr(0, postion));//经度
var lat = parseFloat(latLngs[j].substr(postion + 1));//纬度
triangleCoords.push(new google.maps.LatLng(lat, lng)); //加入经纬度
//活动最大，最小经纬度。计算地图中心点
if(j==1&&top==0&&bottom==0&&left==0&&right==0){
top=lat; bottom=lat; left=lng; right=lng;
}else{
if(lat>top){ top=lat; } if(lat<bottom){ bottom=lat; }
if(lng>right){ right=lng; } if(lng<left){ left=lng; }
}
}
bermudaTriangle = new google.maps.Polygon({
paths : triangleCoords,
strokeColor : "#FF0000",
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.03
});
bermudaTriangle.setMap(map);
// 单击
google.maps.event.addListener(bermudaTriangle, 'click', function(event) {
if (infoWindow != null){
infoWindow.close();
}
//tmpLatLng = tmpLatLng + event.latLng;
//showDialog(tmpLatLng);
});
map.setCenter(new google.maps.LatLng(bottom+((top-bottom)/2),left+((right-left)/2)));
//map.setZoom(8);
}
});
// 单击地图区域关闭消息框
google.maps.event.addListener(map, 'click', function (event) {
if (infoWindow != null){
infoWindow.close();
}
});
// 图标类型
var icons = ["marker1.png", "marker2.png", "marker3.png", "marker4.png"];
var iconNames = ["类型一", "类型二", "类型三", "类型四"];
var mapInfos = [];
for (i=0; i<icons.length; i++){
mapInfos.push("<tr><td><img src='mapfiles/markers/"+icons[i]+"'></td><td>"+iconNames[i]+"</td></tr>");
}
$('#map_infos').append(mapInfos.join(''));
// 维度经度数据
//var ll = "37.07818882978002, 117.15133666992188;36.98280911070616, 117.257080078125;36.870832155646326, 117.40264892578125;36.711366342819254, 117.51937866210938;36.61662990355667, 117.3779296875;36.569217971443656, 117.16232299804688;36.52950186333475, 116.83135986328125;36.63316209558658, 116.883544921875;36.672824886786564, 117.00164794921875;36.17113976708937, 116.32598876953125;36.33725319397005, 116.553955078125;36.5184659896759, 116.75994873046875;36.40802070382984, 116.993408203125;36.52729481454624, 117.20489501953125;36.639773979496574, 117.11151123046875)";
var ll = "37.20435500746071, 122.06050872802734;37.175090072219206, 122.05570220947266;37.15183414397669, 122.09449768066406;37.17235445206045, 122.11544036865234;37.18767264916778, 122.13981628417969;37.20599569602764, 122.11441040039062;37.18493748465265, 122.07939147949219";
var lls = ll.split(";");
// 添加标注点
for (i=0; i<lls.length; i++){
if (i==0) addMarker(map, lls[i], icons[3], "某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
else if (i==1) addMarker(map, lls[i], icons[1], "某某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
else if (i==2) addMarker(map, lls[i], icons[2], "某某某项目", "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
else addMarker(map, lls[i], icons[i%2==0?3:0], "国家重型汽车有关建设项目"+i, "2013", "高新区", "80574", "40574", "http://www.baidu.com/img/bdlogo.gif", "http://baike.baidu.com");
}
// 绘制区域线
if (lls.length > 0){
addPolygon(map, lls);
}
}
// 添加标注点
function addMarker(map, latLngs, icon, name, year, unit, total, curr, image, video){
var latLng = latLngs.replace(/ /g,"").split(",");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latLng[0], latLng[1]),
map: map,
//draggable: true,
icon: 'mapfiles/markers/'+icon,
//animation :google.maps.Animation.DROP,
title: name
});
google.maps.event.addListener(marker, 'click', function() {
//parent.document.menuFrame.location = 'http://www.baidu.com/s?wd='+name;
var content = "<table><tr><td><b>项目名称: </b></td><td colspan='3' style='color:#f00'>"+name+"</td></tr>"
+"<tr><td><b>年份: </b></td><td>"+year+"</td><td><b>责任单位: </b></td><td>"+unit+"</td></tr>"
+"<tr><td><b>总投资额(万): </b></td><td>"+total+"</td><td><b>当前投资额(万): </b></td><td>"+curr+"</td></tr>"
+"<tr><td colspan='4'><b>当前进度: </b></td></tr><tr>"
+" <td colspan='2'><img src='"+image+"' style='width:300px; height:200px; border:1px solid #ddd;'/></td>"
+" <td colspan='2'><iframe src='"+video+"' style='width:300px; height:200px; border:1px solid #ddd;'><iframe></td>"
+"</tr>"
+"</table>";
if (infoWindow != null){
infoWindow.close();
}
infoWindow.setContent(content);
infoWindow.open(map, this);/**/
});
}
// 绘制区域线
function addPolygon(map, latLngs){
var paths = [];
for (i=0; i<latLngs.length; i++){
var latLng = latLngs[i].replace(/ /g,"").split(",");
paths.push(new google.maps.LatLng(latLng[0], latLng[1])); //加入经纬度
}
var polygon = new google.maps.Polygon({
paths : paths,
strokeColor : "#FF0000",
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.1
});
polygon.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div style="height:100%"><!--
<div id="side">
<input id="reset" value="清除区域" type="button" class="navi"/>
<input id="showData" value="显示区域坐标" type="button" class="navi"/>
<div id="dataPanel"> </div>
</div> -->
<div id="map_canvas" style="width:100%; height:100%"></div>
<table id="map_infos" style="position:absolute;right:30px;bottom:30px;width:140px;z-index:1000;background:#fff;padding:10px;border:1px solid #adadad;font-size:12px;text-align:center;"></table>
</div>
</body>
</html>