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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 50.475713,
lng: 30.516879
},
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow();
var coords = [{
"id": "1",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "71",
"number_avto": "A\u04109612MO",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.47674958836734, \"lng\": 30.493953871490476}, {\"lat\": 50.475309302071445, \"lng\": 30.495704056793215}, {\"lat\": 50.474063853648836, \"lng\": 30.49422466986084}, {\"lat\": 50.47320895722949, \"lng\": 30.49427891026312}, {\"lat\": 50.472572552772064, \"lng\": 30.49364650515747}, {\"lat\": 50.47134751780746, \"lng\": 30.492950323257446}, {\"lat\": 50.470256983547614, \"lng\": 30.491679552406367}, {\"lat\": 50.46924734941041, \"lng\": 30.490926149784173}, {\"lat\": 50.465116242336634, \"lng\": 30.487346890909294}, {\"lat\": 50.46388061190283, \"lng\": 30.487898233917235}, {\"lat\": 50.45984277476289, \"lng\": 30.48338869568056}, {\"lat\": 50.456463079337894, \"lng\": 30.480110179491476}, {\"lat\": 50.452099445789955, \"lng\": 30.47760413949868}, {\"lat\": 50.44992157612657, \"lng\": 30.48818727949856}, {\"lat\": 50.44910997180602, \"lng\": 30.49383515491104}, {\"lat\": 50.44858801010621, \"lng\": 30.495888237251393}, {\"lat\": 50.448641710126985, \"lng\": 30.497545195589964}, {\"lat\": 50.44784190593388, \"lng\": 30.498376356968265}, {\"lat\": 50.446188077029404, \"lng\": 30.499153874166268}, {\"lat\": 50.4439110070313, \"lng\": 30.512129107715168}, {\"lat\": 50.44282764487858, \"lng\": 30.52010877441319}, {\"lat\": 50.44741131849923, \"lng\": 30.52222790929227}, {\"lat\": 50.447505359439624, \"lng\": 30.522281932987198}, {\"lat\": 50.44758412969209, \"lng\": 30.522497268737652}, {\"lat\": 50.44917635269867, \"lng\": 30.52372187410697}, {\"lat\": 50.45109683800667, \"lng\": 30.527276154959736}, {\"lat\": 50.451500702391556, \"lng\": 30.528142862379582}, {\"lat\": 50.45060659361875, \"lng\": 30.52935289255322}, {\"lat\": 50.45218456100838, \"lng\": 30.53454367481322}, {\"lat\": 50.453666840867605, \"lng\": 30.53721318059911}, {\"lat\": 50.45599925084942, \"lng\": 30.531309787612827}, {\"lat\": 50.456736277693906, \"lng\": 30.529893879363954}, {\"lat\": 50.457907029196186, \"lng\": 30.528081004180876}, {\"lat\": 50.460986779261845, \"lng\": 30.525619034416195}, {\"lat\": 50.4669647056591, \"lng\": 30.524616484466605}, {\"lat\": 50.47107157507795, \"lng\": 30.524606053741536}, {\"lat\": 50.47192786481432, \"lng\": 30.523308162689204}, {\"lat\": 50.476818524839466, \"lng\": 30.511938024810775}, {\"lat\": 50.477310557159385, \"lng\": 30.505297482376136}, {\"lat\": 50.4801236872805, \"lng\": 30.505281692665108}, {\"lat\": 50.48047892219089, \"lng\": 30.501360606628396}, {\"lat\": 50.4783080422313, \"lng\": 30.500625984901376}, {\"lat\": 50.47854039632276, \"lng\": 30.498861394912637}, {\"lat\": 50.479366623693544, \"lng\": 30.49759286182018}, {\"lat\": 50.4791687394576, \"lng\": 30.49769761974335}, {\"lat\": 50.48114192312777, \"lng\": 30.490249277080466}, {\"lat\": 50.47936012517129, \"lng\": 30.490096542938204}, {\"lat\": 50.47795928900465, \"lng\": 30.492904971771168}]",
"color": "#fef200"
}, {
"id": "2",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "72",
"number_avto": "\u0410\u04102363\u0420\u0410",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.518486179037176, \"lng\": 30.459471392395017}, {\"lat\": 50.51360885678462, \"lng\": 30.456252157589006}, {\"lat\": 50.506110880829375, \"lng\": 30.459255647697432}, {\"lat\": 50.50012037289259, \"lng\": 30.460885262802094}, {\"lat\": 50.48961149033943, \"lng\": 30.4700668105163}, {\"lat\": 50.48786763996452, \"lng\": 30.478988530212405}, {\"lat\": 50.48847649762083, \"lng\": 30.483518483917237}, {\"lat\": 50.48618493179595, \"lng\": 30.489543321586552}, {\"lat\": 50.48460220660303, \"lng\": 30.48950875098035}, {\"lat\": 50.48214558580464, \"lng\": 30.489474180374145}, {\"lat\": 50.48076856089214, \"lng\": 30.49039209207922}, {\"lat\": 50.4811996902367, \"lng\": 30.49402678340539}, {\"lat\": 50.47939439932129, \"lng\": 30.49970651004992}, {\"lat\": 50.482340821721166, \"lng\": 30.501094702270507}, {\"lat\": 50.482936096904346, \"lng\": 30.515001658691403}, {\"lat\": 50.482429535005174, \"lng\": 30.52099967427057}, {\"lat\": 50.48246912376432, \"lng\": 30.52699768984985}, {\"lat\": 50.48128736691, \"lng\": 30.53276473734286}, {\"lat\": 50.48250871249031, \"lng\": 30.537845139328056}, {\"lat\": 50.48567253430273, \"lng\": 30.535643194782324}, {\"lat\": 50.48594183510836, \"lng\": 30.5297505306321}, {\"lat\": 50.48746716996721, \"lng\": 30.530423914150333}, {\"lat\": 50.48831173181515, \"lng\": 30.53239138899039}, {\"lat\": 50.48839176647237, \"lng\": 30.52594745635986}, {\"lat\": 50.48865820109151, \"lng\": 30.52845830754086}, {\"lat\": 50.48942975396104, \"lng\": 30.531248108459522}, {\"lat\": 50.49254402578211, \"lng\": 30.544530483387007}, {\"lat\": 50.49316007397842, \"lng\": 30.543758083076455}, {\"lat\": 50.493777985809984, \"lng\": 30.54370176617283}, {\"lat\": 50.49453239313523, \"lng\": 30.54278714238444}, {\"lat\": 50.49342031778105, \"lng\": 30.54104372549625}, {\"lat\": 50.49272500960682, \"lng\": 30.54176259545511}, {\"lat\": 50.49032415837577, \"lng\": 30.53161319242861}, {\"lat\": 50.49524550636781, \"lng\": 30.52260127368163}, {\"lat\": 50.5123059660119, \"lng\": 30.513933588317855}, {\"lat\": 50.51485116560912, \"lng\": 30.51615506446842}, {\"lat\": 50.52225314600434, \"lng\": 30.52275390573118}, {\"lat\": 50.53298205380208, \"lng\": 30.512229524642862}, {\"lat\": 50.53305387865268, \"lng\": 30.499500064201357}, {\"lat\": 50.53303523423201, \"lng\": 30.485839725459982}, {\"lat\": 50.54014970376445, \"lng\": 30.48536434185496}, {\"lat\": 50.54060870430012, \"lng\": 30.49209873608197}, {\"lat\": 50.55624544245322, \"lng\": 30.492333113066024}, {\"lat\": 50.571222847713784, \"lng\": 30.4888767704457}, {\"lat\": 50.57626535215849, \"lng\": 30.493119302760988}, {\"lat\": 50.586648111220214, \"lng\": 30.496846850945303}, {\"lat\": 50.591171316276174, \"lng\": 30.48366575349985}, {\"lat\": 50.58130802291522, \"lng\": 30.470312994677442}, {\"lat\": 50.567355114844794, \"lng\": 30.454152478186643}, {\"lat\": 50.562287573724355, \"lng\": 30.46818001698216}, {\"lat\": 50.55362327117492, \"lng\": 30.47331830075018}, {\"lat\": 50.548290036917756, \"lng\": 30.478788349731417}]",
"color": "#008000"
}];
var object_in_array = [];
for (var i = 0; i < coords.length; i++) {
var coord = coords[i];
// TODO: исправить генерирование данных
var coordinate = JSON.parse(coords[i].polygon);
polygon = new google.maps.Polygon({
paths: coordinate,
strokeColor: coord.color,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: coord.color,
fillOpacity: 0.35,
Editable: false,
draggable: false
});
polygon.setMap(map);
polygon.addListener('click', showNumber(coord.number));
};
function showNumber(number) {
return function(event) {
infoWindow.setContent(number);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
var dots = [{
'lat': 50.4584506,
'lng': 30.522257
},
{
'lat': 50.458615,
'lng': 30.518116
},
{
'lat': 50.456525,
'lng': 30.494649
},
{
'lat': 50.565899,
'lng': 30.478956
},
{
'lat': 50.505899,
'lng': 30.478956
}
]
console.log(typeof dots);
for (var i = 0; i < dots.length; i++) {
var coords = dots[i];
// console.log(coords.lat);
var latLng = new google.maps.LatLng(coords.lat, coords.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
animation: google.maps.Animation.DROP,
});
};
}
</script>
</body>
</html> |
(
