Last active
December 15, 2015 02:59
-
-
Save valenso/5191305 to your computer and use it in GitHub Desktop.
This file contains 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