map-polygon.html
4.92 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
<!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">
// 地图服务地址
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();
function initialize() {
var myLatlng = new google.maps.LatLng(36.69571558689667, 117.09051073510739);
var myOptions = {
center: myLatlng,
zoom: 13,
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 marker = new google.maps.Marker({
position: myLatlng,
map: map,
//draggable:true,
//icon: 'mapfiles/rotate2.png',
//animation :google.maps.Animation.DROP,
title:"这是一个点"
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent("坐标位置:" + marker.getPosition().toUrlValue(6));
infoWindow.open(map, this);
});
/////// 绘制矩形
var creator = new PolygonCreator(map);
// 初始化矩形
var triangleCoords = [];
var ll = "(36.702803801572976, 117.06424654443356)(36.68532294513613, 117.07300127465817)(36.66714965408092, 117.07351625878903)(36.6707295812113, 117.077292809082)(36.67403398151529, 117.08501757104489)(36.67995401049492, 117.11557329614254)(36.71876709472927, 117.11454332788082)(36.716565458365395, 117.09634722192379)";
var lls = ll.split(")(");
for (i=0; i<lls.length; i++){
ll = lls[i].replace(" ","").replace("(","").replace(")","").split(",");
triangleCoords.push(new google.maps.LatLng(ll[0], ll[1]));
}
creator.drawPolygon(triangleCoords);
// 单击矩形
google.maps.event.addListener(creator.getPolygon(), 'click', function(event) {
// Since this polygon has only one path, we can call getPath()
// to return the MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>当前区域</b><br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += xy.lat() + ', ' + xy.lng() + '; ';
}
contentString += '<br/><br/>';
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
// 清除区域坐标
$('#reset').click(function(){
creator.destroy();
creator=null;
creator=new PolygonCreator(map);
});
// 显示区域坐标
$('#showData').click(function(){
$('#dataPanel').empty();
if(creator.getData() == ""){
$('#dataPanel').append('当前点坐标：' + creator.getDot());
}else{
$('#dataPanel').append('当前区域坐标：' + creator.getData());
}
});
/////////////////
}
</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="height:90%"></div>
</div>
</body>
</html>