INT 21h

• 🏠 ДОМОЙ
• Админство
• Програмство
• Электронство
• Микроскопство
• Мой софт
• 3D печать
• Авто
• Музей
• Часы

Использование API 2ГИС для создания карт с вашей собственной информацией

№ 4167 В разделе Programming от March 21st, 2012,
В подшивках: Javascript

На сайте 2ГИС уже есть классный пример использования API (спасибо тебе, 2ГИС! Я твой преданный юзер уже много лет). Давайте поиграем с ним!

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

    //массивы с описаниями магазинов
    var arr_luch = [84.983202,56.459649,"Магазин Луч<br><a href='http://md.tomsk.ru/'>
            http://md.tomsk.ru</a>"];
    var arr_trigger = [84.964294,56.464543, "Магазин Триггер<br><a href='http://trigger.ru/'>
            http://trigger.ru</a>"];
    var arr_elco = [84.951502,56.493721,"Элко-Про - радиодетали, приборы, конструкторы<br>
            <a href='http://elcopro.ru'>http://elcopro.ru</a>"];
    var arr_elco2 = [84.976156,56.452638,"Филиал Элко-Про - конструкторы, роботы, может
            выдавать заказы с сайта<br><a href='http://elcopro.ru'>http://elcopro.ru</a>"];
    var arr_elgrad = [84.961025,56.463460,"Элград и Вольт мастер - радиодетали<br>
            <a href='http://tom-electron.ru/'>http://elgrad.net</a>"];
    var arr_tomelectron = [84.954648,56.459210,"ТомЭлектрон - радиодетали<br>
            <a href='http://tom-electron.ru/'>http://tom-electron.ru</a>"];

    //массив магазинов
    var shops = [arr_luch, arr_trigger,arr_elco, arr_elco2,arr_elgrad,arr_tomelectron];

В примере показано создание только 1 метки с подсказкой. Мы же сделаем 6. Добавим в программу цикл по элементам массива магазинов.

for(var zi = 0; zi < shops.length; zi++) with({zi: zi}) {
..
}

Чтобы имена переменных не путали нам карты, мы сделаем их уникальными с помощью eval (добавит в имя переменной другую переменную).

var b = new DG.Balloons.Common({
    // Местоположение на которое указывает балун:
    geoPoint: new DG.GeoPoint(shops[zi][0],shops[zi][1]),
    // Текст внутри балуна":
    contentHtml: shops[zi][2]
});
eval("var baloon"+zi+"=b");

Тоже самое нужно сделать и для кода создания метки.

            // Создаем маркер:
            var m = new DG.Markers.Common({
                // Местоположение на которое указывает маркер
                //(в нашем случае, такое же, где и балун):
                geoPoint: new DG.GeoPoint(shops[zi][0],shops[zi][1]),
                // Функция, которая будет вызвана при клике по маркеру:
                clickCallback: function() {
                    // Если балун еще не был добавлен:
                    if (! myMap.balloons.getDefaultGroup().contains(eval("baloon"+zi))) {
                        // Добавить балун на карту:
                        myMap.balloons.add(eval("baloon"+zi));
                    } else {
                    // Если балун уже был добавлен на карту, но потом был скрыт:
                        // Показать балун:
                        eval("baloon"+zi).show();
                    }
                }
            });
            eval("var metka"+zi+"=m");

Добавляем маркер на сайт

myMap.markers.add(eval("metka"+zi));

И теперь вот что получается (клик по картинке ведет на живой пример)

На Яндекс.Картах я сделал абсолютно аналогичным способом программу для одного предприятия. Бригаде ремонтников достаточно зайти на корпоративный портал, чтобы увидеть все, что им необходимо. Поиск координат объектов осуществляется на стадии подключения абонента к сети с помощью специального API от Яндекса. Просто вводите адрес, а программа сама найдет координаты запросом

http://psearch-maps.yandex.ru/1.x/?text=ул калинина 14&key=...

Нет комментариев »