Last active
December 15, 2015 02:59
-
-
Save valenso/5191305 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Пример</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" | |
type="text/javascript"></script> | |
<script type="text/javascript"> | |
// Как только будет загружен API и готов DOM, выполняем инициализацию | |
ymaps.ready(init); | |
function init() { | |
var myMap = new ymaps.Map("map", { | |
center: [55.739, 37.628], | |
zoom: 14 | |
}); | |
var result = []; | |
var data = [ | |
{ 'lat': 55.745175, | |
'lng': 37.638674, | |
'price': 9400000 / 33.4 | |
}, | |
{ 'lat': 55.747872, | |
'lng': 37.631198, | |
'price': 20000000 / 65 | |
}, | |
{ 'lat': 55.731618, | |
'lng': 37.638664, | |
'price': 16000000 / 75 | |
}, | |
{ 'lat': 55.736930, | |
'lng': 37.633760, | |
'price': 8990000 / 40 | |
}, | |
{ 'lat': 55.735574, | |
'lng': 37.618749, | |
'price': 9800000 / 37.2 | |
}, | |
{ 'lat': 55.734881, | |
'lng': 37.631688, | |
'price': 11600000 / 43.3 | |
}, | |
{ 'lat': 55.734001, | |
'lng': 37.618936, | |
'price': 11950000 / 46 | |
}, | |
{ 'lat': 55.739215, | |
'lng': 37.633413, | |
'price': 12000000 / 55 | |
}, | |
{ 'lat': 55.730285, | |
'lng': 37.618704, | |
'price': 13500000 / 47.6 | |
}, | |
{ 'lat': 55.735261, | |
'lng': 37.639222, | |
'price': 15000000 / 71.4 | |
}, | |
{ 'lat': 55.738824, | |
'lng': 37.632330, | |
'price': 15750000 / 57 | |
}, | |
{ 'lat': 55.741908, | |
'lng': 37.632294, | |
'price': 14500000 / 55 | |
}, | |
{ 'lat': 55.732729, | |
'lng': 37.614021, | |
'price': 18100000 / 72.8 | |
}, | |
{ 'lat': 55.740814, | |
'lng': 37.642976, | |
'price': 14550000 / 60 | |
}, | |
{ 'lat': 55.734639, | |
'lng': 37.632337, | |
'price': 18800000 / 60 | |
}, | |
{ 'lat': 55.744616, | |
'lng': 37.624963, | |
'price': 19000000 / 70 | |
}, | |
{ 'lat': 55.737146, | |
'lng': 37.633439, | |
'price': 19500000 / 81 | |
}, | |
{ 'lat': 55.738009, | |
'lng': 37.634337, | |
'price': 20000000 / 72 | |
}, | |
{ 'lat': 55.729654, | |
'lng': 37.627107, | |
'price': 20000000 / 90 | |
}, | |
{ 'lat': 55.734719, | |
'lng': 37.631207, | |
'price': 23000000 / 90 | |
}, | |
{ 'lat': 55.730179, | |
'lng': 37.632076, | |
'price': 23900000 / 101.2 | |
}, | |
{ 'lat': 55.730057, | |
'lng': 37.630778, | |
'price': 25000000 / 73 | |
}, | |
{ 'lat': 55.746983, | |
'lng': 37.629843, | |
'price': 27300000 / 90 | |
}, | |
{ 'lat': 55.737261, | |
'lng': 37.643413, | |
'price': 27800000 / 84 | |
}, | |
{ 'lat': 55.741067, | |
'lng': 37.616900, | |
'price': 29000000 / 99.1 | |
}, | |
{ 'lat': 55.731486, | |
'lng': 37.623619, | |
'price': 30000000 / 96 | |
}, | |
{ 'lat': 55.741687, | |
'lng': 37.623046, | |
'price': 1300000 * 30 / 106 | |
}, | |
{ 'lat': 55.744284, | |
'lng': 37.611257, | |
'price': 1530000 * 30 / 113 | |
}, | |
{ 'lat': 55.739275, | |
'lng': 37.638251, | |
'price': 50000000 / 140 | |
}, | |
{ 'lat': 55.739992, | |
'lng': 37.625443, | |
'price': 30700000 / 110 | |
}, | |
{ 'lat': 55.735342, | |
'lng': 37.628711, | |
'price': 16500000 / 70.8 | |
}, | |
{ 'lat': 55.733019, | |
'lng': 37.633515, | |
'price': 10400000 / 51 | |
}, | |
]; | |
var x1 = 37.603, x2 = 37.6055, y1 = 55.746, y2 = 55.7475; | |
for (var i = 0; i < 12; i++) { | |
for (var j = 0; j < 20; j++) { | |
var continu = false; | |
// console.log(continu); | |
if (!continu) { | |
myRect = new ymaps.Rectangle([ | |
[y1, x1], | |
[y2, x2] | |
], { | |
//Свойства | |
hintContent: i + '' + ',' + j + '', | |
}, { | |
// Опции | |
// Цвет и прозрачность заливки | |
fillColor: '#7df90070', | |
// Цвет и прозрачность границ | |
strokeColor: '#7df90070', | |
// Ширина линии | |
strokeWidth: 0 | |
}); | |
myMap.geoObjects | |
.add(myRect); | |
} | |
x1 = x2; | |
x2 += 0.0025; | |
} | |
y1 = y2; | |
y2 -= 0.0015; | |
x1 = 37.603; | |
x2 = 37.6055; | |
} | |
for (var key in data) { | |
var num_y = ~ ~(((y1 - data[key]['lat']) * 10000) / 15); | |
var num_x = ~ ~(((data[key]['lng'] - x1) * 10000) / 25); | |
var color = ~ ~((data[key]['price'] - 200000) / 1000 * 2.5); | |
//alert(color); | |
var color_num; | |
if (color < 250) { | |
color_num = color.toString(16); | |
while (color_num.length < 2) | |
color_num = '0' + color_num; | |
color_num = color_num + 'ff00'; | |
} | |
else if (color < 500) { | |
color = color - 250; | |
color_num = color.toString(16); | |
while (color_num.length < 2) | |
color_num = '0' + color_num; | |
color_num = 'ff' + color_num + '00'; | |
} | |
myRect = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025], | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025 + 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num, | |
strokeColor: '#' + color_num, | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y, 'x': num_x }); | |
var down = true, up = true, left = true, right = true; | |
var downleft = true, downright = true, upleft = true, upright = true; | |
for (var test in result) { | |
if (result[test]['x'] == num_x + 1 && result[test]['y'] == num_y) | |
down = false; | |
if (result[test]['x'] == num_x + 1 && result[test]['y'] == num_y - 1) | |
downleft = false; | |
if (result[test]['x'] == num_x + 1 && result[test]['y'] == num_y + 1) | |
downright = false; | |
if (result[test]['x'] == num_x - 1 && result[test]['y'] == num_y) | |
up = false; | |
if (result[test]['x'] == num_x - 1 && result[test]['y'] == num_y - 1) | |
upleft = false; | |
if (result[test]['x'] == num_x - 1 && result[test]['y'] == num_y + 1) | |
upright = false; | |
if (result[test]['x'] == num_x && result[test]['y'] == num_y - 1) | |
left = false; | |
if (result[test]['x'] == num_x && result[test]['y'] == num_y + 1) | |
right = false; | |
} | |
if (down) { | |
myRectDown = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 - 0.0015, x1 + num_x * 0.0025], | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025 + 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y, 'x': num_x + 1 }); | |
} | |
if (downleft) { | |
myRectDownLeft = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 - 0.0015, x1 + num_x * 0.0025 - 0.0025], | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025 + 0.0025 - 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y - 1, 'x': num_x + 1 }); | |
} | |
if (downright) { | |
myRectDownRight = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 - 0.0015, x1 + num_x * 0.0025 + 0.0025], | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025 + 0.0025 + 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y + 1, 'x': num_x + 1 }); | |
} | |
if (up) { | |
myRectUp = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025], | |
[y1 - num_y * 0.0015 + 2 * 0.0015, x1 + num_x * 0.0025 + 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y, 'x': num_x - 1 }); | |
} | |
if (upleft) { | |
myRectUpLeft = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025 - 0.0025], | |
[y1 - num_y * 0.0015 + 2 * 0.0015, x1 + num_x * 0.0025 + 0.0025 - 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y - 1, 'x': num_x - 1 }); | |
} | |
if (upright) { | |
myRectUpRight = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025 + 0.0025], | |
[y1 - num_y * 0.0015 + 2 * 0.0015, x1 + num_x * 0.0025 + 0.0025 + 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y + 1, 'x': num_x - 1 }); | |
} | |
if (left) { | |
myRectLeft = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025 - 0.0025], | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y - 1, 'x': num_x }); | |
} | |
if (right) { | |
myRectRight = new ymaps.Rectangle([ | |
[y1 - num_y * 0.0015, x1 + num_x * 0.0025 + 0.0025], | |
[y1 - num_y * 0.0015 + 0.0015, x1 + num_x * 0.0025 + 2 * 0.0025] | |
], { | |
hintContent: ~ ~data[key]['price'] + " р/м.кв." | |
}, { | |
fillColor: '#' + color_num + '50', | |
strokeColor: '#' + color_num + '50', | |
strokeWidth: 0 | |
}); | |
result.push({ 'y': num_y + 1, 'x': num_x }); | |
} | |
myMap.geoObjects | |
.add(myRect) | |
.add(myRectDown) | |
.add(myRectUp) | |
.add(myRectUpLeft) | |
.add(myRectUpRight) | |
.add(myRectLeft) | |
.add(myRectRight) | |
.add(myRectDownLeft) | |
.add(myRectDownRight) | |
; | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<div id="map" style="width:600px;height:500px"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment