Куда копать? Как нарисовать сетку на карте?

Question

[Максим Гречушников]

Доброго всем. Есть неделька отпуска. Чтобы провести время с пользой, хотелось бы разобраться в паре мест.
а именно...
Куда копать и что почитать, чтобы сделать подобную сетку?


В данном случае, на весь мир строится фиксированная сетка. фиксированная на реальные размеры мира. кликая по одному или другому квадрату, можно "нападать", "разведывать", "захватывать"
Матрицу сохранить то смогу, но не совсем понимаю как можно нарисовать такую матрицу на картах, как привязать ее к координатам, как отлавливать на какой квадрат был произведен клик.
Спрашиваю как бэкэндер, с фронтом редко встречаюсь, тем более с картами.

Comments

[Максим Гречушников]

copal: ну графы это довольно широкая тема. можно всю жизнь о них читать

[V Sh.]

Смотрю я на скриншоты и не вижу привязки координатной сетки к карте. Такое чувство, что сама карта нарисована на одном слое (бэкграунд), а поверх, еще в одном слое, уже нарисована координатная сетка, клики по которой реализуют весь функционал игры. Даже если заменить карту на фон любого цвета, игра не пострадает. Просто потеряет в эстетичности.

П.С. Если же нужна именно привязка к карте (кликаем на остров странной формы для нападения), то можно сделать так:
1. Рисуем карту и помещаем ее в первый слой.
2. Копируем ту же карту во второй слой. Изменяем ее так, чтобы все доступные зоны были разных не повторяющихся между собой цветов (остров А зеленый, остров Б - красный и т.д.). Скрываем этот слой.
3. Строим таблицу соответствий цветов и объектов.
4. Отслеживаем событие нажатие кнопки мыши. Смотрим координаты нажатия. Смотрим, какого цвета там пиксель (по второму слою). Через таблицу соответствий находим объект для действий.
5. PROFIT!

Answer 1

[Алексей]

Сам с этим не работал, так что не ругайте.
Есть такой пример: www.bdcc.co.uk/Gmaps/ll_grat_v3_demo.htm

Судя по коду, если ничего не упустил, нужно подключить GoogleMaps и эту библиотеку: www.bdcc.co.uk/Gmaps/v3_ll_grat.js

и добавить следующий код:

var map;
var grid;

function initialize() {
    map = new google.maps.Map(document.getElementById('map_div'), {
        center: new google.maps.LatLng(51, -1),
        zoom: 10,
        maxZoom: 21,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        panControl: false,
        draggableCursor: "default",
        streetViewControl: true
    });

    grid = new Graticule(map, true);
}

По-поводу определения на какой квадрат кликнули - получайте из GoogleMaps API координаты клика в latitude/longitude и сопоставляйте с координатами сетки.