复制代码
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地图-覆盖物</title> <style> /*设置地图显示大小*/ #mapDiv{ width: 600px; height: 400px; position: relative; float: left; } span{ padding: 10px; } </style> </head> <body onLoad="onLoad()"> <!--地图容器--> <div id="mapDiv"></div> <div> <span>显示</span> <input type="button" onClick="showMarker()" value="显示标注"/> <input type="button" onClick="showPolyline()" value="显示线"/> <input type="button" onClick="showPolygon()" value="显示面"/> <input type="button" onClick="showPolygon1()" value="显示中空面"/> <input type="button" onClick="showRectangle()" value="显示矩形"/> <input type="button" onClick="showCircle()" value="显示圆形"/> <input type="button" onClick="showInfoWindow()" value="显示信息窗口"/> <input type="button" onClick="showMarkerLabel()" value="显示标注标签"/> </div> <div> <span>操作</span> <input type="button" onClick="showInfoWindowMarker()" value="为标注绑定点击打开信息窗口"/> <input type="button" onClick="getInfoWindowMarker()" value="获取信息窗口的内容"/> </div> </body> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script> <script type="text/javascript"> var map; var zoom = 10; var infoWin; function onLoad() { map = new T.Map("mapDiv"); map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom); //使用卫星和路网的混合视图 （其他视图都可以) map.addControl(TMAP_HYBRID_MAP); } //显示标注 function showMarker(){ //清除覆盖物 map.clearOverLays(); //创建标注对象 var marker = new T.Marker(new T.LngLat(116.411794, 39.9068)); //向地图上添加标注 map.addOverLay(marker); } //显示线 function showPolyline(){ //清除覆盖物 map.clearOverLays(); points = []; points.push(new T.LngLat(116.41136, 39.97569)); points.push(new T.LngLat(116.32969, 39.92940)); points.push(new T.LngLat(116.385438, 39.90610)); var line = new T.Polyline(points); line.setColor("red"); map.addOverLay(line); } //显示多边形 function showPolygon(){ //清除覆盖物 map.clearOverLays(); var points = []; points.push(new T.LngLat(116.41136, 39.97569)); points.push(new T.LngLat(116.411794, 39.9068)); points.push(new T.LngLat(116.32969, 39.92940)); points.push(new T.LngLat(116.385438, 39.90610)); var polygon = new T.Polygon(points,{ color: "blue",weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5}); //向地图上添加面 map.addOverLay(polygon); } //显示带洞多边形 function showPolygon1(){ //清除覆盖物 map.clearOverLays(); var points = []; points.push(new T.LngLat(116.315000,39.964750)); points.push(new T.LngLat(116.303330,39.960810)); points.push(new T.LngLat(116.306760,39.866270)); points.push(new T.LngLat(116.328740,39.847560)); points.push(new T.LngLat(116.366500,39.855730)); points.push(new T.LngLat(116.442380,39.856520)); points.push(new T.LngLat(116.455080,39.865480)); points.push(new T.LngLat(116.456110,39.950020)); points.push(new T.LngLat(116.428990,39.967390)); var points1 = []; points1.push(new T.LngLat(116.349330,39.941590)); points1.push(new T.LngLat(116.350620,39.900650)); points1.push(new T.LngLat(116.353110,39.898670)); points1.push(new T.LngLat(116.413880,39.899990)); points1.push(new T.LngLat(116.418340,39.903150)); points1.push(new T.LngLat(116.429330,39.903940)); points1.push(new T.LngLat(116.427270,39.947910)); points1.push(new T.LngLat(116.365810,39.946600)); //创建面对象 var polygon = new T.Polygon([points,points1],{ color: "black", weight: 3, opacity: 0.2, fillColor: "blue", fillOpacity: 0.5 }); //向地图上添加面 map.addOverLay(polygon); } //显示矩形 function showRectangle(){ //清除覆盖物 map.clearOverLays(); var bounds = new T.LngLatBounds(new T.LngLat(116.36231, 39.87784),new T.LngLat( 116.43954, 39.92841)); var rect = new T.Rectangle(bounds ); //向地图上添加矩形 map.addOverLay(rect); } //显示圆形 function showCircle(){ //清除覆盖物 map.clearOverLays(); var circle = new T.Circle(new T.LngLat(116.40093, 39.90313), 5000,{color:"blue",weight:5,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"}); //向地图上添加圆 map.addOverLay(circle); } //显示信息窗口 function showInfoWindow(){ //清除覆盖物 map.clearOverLays(); var lnglat = new T.LngLat(116.40969, 39.94940); //创建信息窗口对象 infoWin = new T.InfoWindow(); infoWin.setLngLat(lnglat); //设置信息窗口要显示的内容 infoWin.setContent("添加的信息窗口"); //向地图上添加信息窗口 map.addOverLay(infoWin); } //显示标注文字标签 function showMarkerLabel(){ //清除覆盖物 map.clearOverLays(); marker = new T.Marker( new T.LngLat(116.40969, 39.94940)); // 创建标注 map.addOverLay(marker); label = new T.Label({ text: "<b>文字标注!!!<b>", position: marker.getLngLat(), offset: new T.Point(3, -30) }); map.addOverLay(label); } //标注上显示信息窗口 function showInfoWindowMarker(){ map.clearOverLays(); marker = new T.Marker( new T.LngLat(116.40969, 39.94940)); // 创建标注 map.addOverLay(marker); //创建信息窗口对象 infoWin = new T.InfoWindow(); var info = "我要在标注上显示的内容，可以是html片段，也可以是纯文本"; infoWin.setContent(info); //为标注注册点击事件 marker.addEventListener("click", function () { marker.openInfoWindow(infoWin); }); } //标注上显示信息窗口 function getInfoWindowMarker(){ try{ var info = infoWin.getContent(); alert(info); }catch(e){ alert("请先为标注绑定点击打开信息窗口事件") } } </script> </html>
最后
以上就是神勇小天鹅最近收集整理的关于天地图-第五篇-覆盖物的全部内容，更多相关天地图-第五篇-覆盖物内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复