Клуб API Карт

Удаление меток с карты

rixvologda
22 июня 2011, 14:13

Добрый день!

Создала карту, на которой при загрузке имеются метки. Имеется меню в виде списка, если пункт меню активен, то на карту добавляются метки, относящиеся к данному пункту, если не активно, то метки удаляются.

 

<!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>Пример-2 Работаем с грпуппами объектов на Яндекс.Карте v1.1</title> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANmypk0BAAAAuSYEVAMA0dOVVQ437o62ic2t3RE6WRN3jpEAAAAAAAAAAABg5saDRRd4VWiDSh8FjY6aUxJ2jg==" type="text/javascript"></script> 

    <script type="text/javascript"> 

        // Создание обработчика для события window.onLoad

        YMaps.jQuery(function () {

            // Создание экземпляра карты и его привязка к созданному контейнеру

            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0] 

            // Установка для карты ее центра и масштаба

            map.setCenter(new YMaps.GeoPoint(39.876772, 59.231417), 11); 

            // Добавление элементов управления           

            map.addControl(new YMaps.ToolBar()

            map.addControl(new YMaps.TypeControl()

            map.addControl(new YMaps.Zoom()

        map.addControl(new YMaps.ScaleLine()

var searchControl = new YMaps.SearchControl({

           resultsPerPage: 5,  // Количество объектов на странице

        useMapBounds: 1     // Объекты, найденные в видимой области карты 

                        // будут показаны в начале списка

        } 

            map.addControl(searchControl);  //добавлена строка поиска

           

/////////////////////////////////////////////////////////////////////////////////////////////           

           

    var bounds = map.getBounds(),

    pointLb = bounds.getLeftBottom(),

    span = bounds.getSpan(

var gCollection = new YMaps.GeoObjectCollection(



gCollection.add([

    new YMaps.Placemark(new YMaps.GeoPoint(39.895772,59.253343), "АЗС №6, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.678397453349596,59.2895443041752), "АЗС №21, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.816657,59.217752), "АЗС №23, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.96952347062705,59.17382382033087), "АЗС №30, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.917053,59.200454), "АЗС №35, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.92635043807226,59.23732850896853), "АЗС №37, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.79269010694812,59.2388428071004), "АЗС №41, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.811357,59.199389), "АЗС №48, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.89843978219468,59.184903286086644), "АЗС №60, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.892978025267226,59.17613406872476), "АЗС №65, Лукойл"),

    new YMaps.Placemark(new YMaps.GeoPoint(39.93135405420482,59.216116643434965), "АЗС №78, Лукойл")

]


 map.addOverlay(gCollection);




///////////////////////////////////////////////////////////////////////////////////////////



// Группы объектов

            var groups = [

                createGroup("Лукойл", [

createPlacemark(new YMaps.GeoPoint(39.895772,59.253343), "АЗС №6, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.678397453349596,59.2895443041752), "АЗС №21, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.816657,59.217752), "АЗС №23, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.96952347062705,59.17382382033087), "АЗС №30, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.917053,59.200454), "АЗС №35, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.92635043807226,59.23732850896853), "АЗС №37, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.79269010694812,59.2388428071004), "АЗС №41, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.811357,59.199389), "АЗС №48, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.89843978219468,59.184903286086644), "АЗС №60, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.892978025267226,59.17613406872476), "АЗС №65, Лукойл"),

createPlacemark(new YMaps.GeoPoint(39.93135405420482,59.216116643434965), "АЗС №78, Лукойл")

                ], "default#gasStationIcon"),

                createGroup("Shell", [

createPlacemark(new YMaps.GeoPoint(39.830724776077744,59.23503622111408), "АЗС, Shell"),

createPlacemark(new YMaps.GeoPoint(39.914376,59.214293), "АЗС, Shell"),

createPlacemark(new YMaps.GeoPoint(39.92767994469276,59.20126460901723), "АЗС, Shell")

                ], "default#gasStationIcon"),

                createGroup("Энтиком-Инвест", [

createPlacemark(new YMaps.GeoPoint(39.81093489036859,59.21525075987278), "АЗС №28, ООО Энтиком-Инвест"),

createPlacemark(new YMaps.GeoPoint(39.82492165934234,59.201476563290726), "АЗС №27, ООО Энтиком-Инвест"),

createPlacemark(new YMaps.GeoPoint(39.85420673760463,59.187512407017955), "АЗС №25, ООО Энтиком-Инвест"),

createPlacemark(new YMaps.GeoPoint(39.899140468116286,59.18489406622362), "АЗС №12, ООО Энтиком-Инвест")

                ], "default#gasStationIcon"),

                createGroup("АЗС, ЗАО ВОМЗ-Авто", [

createPlacemark(new YMaps.GeoPoint(39.87401458961946,59.21538893425971), "АЗС, ЗАО ВОМЗ-Авто")

                ], "default#gasStationIcon")

            ];


            // Создание списка групп

            for (var i = 0; i < groups.length; i++) {

                addMenuItem(groups[i], map, YMaps.jQuery("#menu")

            }

        })


        // Добавление одного пункта в список

        function addMenuItem (group, map, menuContainer) {


            // Показать/скрыть группу на карте

            YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.title + "</a>")

                .bind("click", function () {

                    var link = YMaps.jQuery(this);

                                       


                    // Если пункт меню "неактивный", то добавляем группу на карту,

                    // иначе - удаляем с карты

                    if (link.hasClass("active")) {

                        map.removeOverlay(group);

                    } else {

                        map.addOverlay(group);

                    }


                    // Меняем "активность" пункта меню

                    link.toggleClass("active");


                    return false;

                })


                // Добавление нового пункта меню в список

                .appendTo(

                    YMaps.jQuery("<li></li>").appendTo(menuContainer)

                )

        };


        // Создание группы

        function createGroup (title, objects, style) {

            var group = new YMaps.GeoObjectCollection(style);


            group.title = title;

            group.add(objects);


            return group;

        };


        // Создание метки

        function createPlacemark (point, name, description) {

            var placemark = new YMaps.Placemark(point);


            placemark.name = name;

            placemark.description = description;


            return placemark

        }       

    </script>  

    <style type="text/css"> 

        /* Оформление меню (начало)*/ 

            #menu {

                list-style-image: url("http://komandirovka.vol-info.ru/images/li_img.png");               

                padding: 0;

            }

            #menu li{

                 padding: 0;

            }

            #menu a {                    

                font-family:Arial,Helvetica,Sans-Serif;               

                font-size:13px;

            } 

            a.active {

                color: #9A171F;           

            } 

        /* Оформление меню (конец)*/

    </style>  

</head>  

<body>     

   <div id="YMapsID" style="width:520px;height:400px; border:solid #FFF 4px;"></div> <br/>

   <ul id="menu"></ul> 

 </body> 

</html>

 

Можно посмотреть по адресу:  http://komandirovka.vol-info.ru/map2.php

 

Мне необходимо, чтобы при нажатии на ссылку в меню, метки, которые присутствуют на карте при загрузке удалялись, а все остальное работало, как работает...

Помогите пожалуйста, кто знает. 

 

5 комментариев
Подписаться на комментарии к посту

1. уберите ваш код под врезку

2. ссылка на страницу будет полезнее чем код

Насколько я понял метки, которые присутствуют в начале это gCollection.

Вам надо в обработчике клика удалять их с карты

 

YMaps.jQuery("" + group.title + "")

                .bind("click", function () {

                    var link = YMaps.jQuery(this);

                    map.removeOverlay(gCollection);

                    ...


 

 

да, метки это и есть gCollection.

попробовала вставить, можно посмотреть, что поучилось.

Не работает  :(    почему, не понимаю.

 

проблема в области видимости gCollection

она не видна в обработчике клика

Нужно вынести объявление gCollection из обработчика document.ready

 
   

 

спасибо большое! :-)

с  javascript действительно проблемы, нужно изучать!

firebug стоит, только использую для верстки.