Клуб API Карт

Заменить стандартные значки меток находящиеся в кластере

Пост в архиве.

 

Добрый день одноклубники,

прошу помощи в замене стандартных значков меток на свою png - шку.

 

Имеется кластер и в нем находится массив меток получаемые из формата json:

http://www.voda-st.ru/yacluster.html


{style: } пробовал применять для placemark - не получилось. если есть мысли, буду рад их увидеть


<!doctype html> 

<html> 

  <head> 

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

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta http-equiv=»X-UA-Compatible» content=»IE=7″/> 

    <title>Кластеризация меток на Яндекс.картах - пример 4</title> 

<script src="http://api-maps.yandex.ru/1.1/?key=AMd4cU4BAAAAUzJVbQIAF8o6lIUup_e4RVrRoqH3SmU5fbsAAAAAAAAAAACEVJaJuiN3zPcBJ-V5XjcNOvZcRQ==&modules=pmap&wizard=constructor" type="text/javascript"></script>

    <script type="text/javascript" src="js/yandex.clusterer.min.js"></script> 

    <style type="text/css"> 

 

        html, body, #ymap {

            width: 100%;

            height: 100%;

        }

     

        body {

            margin: 0;

            padding: 0;

        }



    </style> 

    <script type="text/javascript"> 

      var clusterer = null,

          msie = YMaps.jQuery.browser.msie,

          markers = [];


      YMaps.jQuery(function() {

        // Определяем карту и добавляем элементы управления

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

        map.setCenter(new YMaps.GeoPoint(37.631342,55.740738), 8, YMaps.MapType.MAP);


//Во весь экран

var toolbar = new YMaps.ToolBar(


            // Создание кнопки-флажка

            var button = new YMaps.ToolBarToggleButton({ 

                icon: "icon-fullscreen.png", 

                hint: "Разворачивает карту на весь экран"

            }

 

            // Если кнопка активна, то карта разворачивается во весь экран

            YMaps.Events.observe(button, button.Events.Select, function () {

                setSize(

           }

        

            // Если кнопка неактивна, то карта принимает фиксированный размер

            YMaps.Events.observe(button, button.Events.Deselect, function () {

                setSize(600, 400);

            }


         

            // Функция устанавливает новые размеры для карты

            function setSize (newWidth, newHeight) {

                YMaps.jQuery("#ymap").css({

                    width: newWidth || "", 

                    height: newHeight || ""

                }


               map.redraw(

            }


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

            toolbar.add(button);

 

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

            map.addControl(toolbar);

        map.addControl(new YMaps.ToolBar()

        map.addControl(new YMaps.Zoom()

        map.enableScrollZoom(

    map.addControl(new YMaps.SearchControl()




        // создать clusterer объект с определенными параметрами

        var opts = {

          centered: msie ? false : true, // if not IE use centered clusters

          grid: msie ? 70 : 50 // for IE grid is bigger

        };

        clusterer = new YandexClusterer(map, [], opts);

        

          // remove old markers

          l = markers.length;

          while (l--) {

            map.removeOverlay(markers[l]

          }

          markers = [];

          if (clusterer) clusterer.clearMarkers( // удаляем маркеры кластера

          

          YMaps.jQuery.getJSON("vivmarkers.php", function(json){ 

            if (json.status == 'OK') {  

            for (i = 0; i < json.markers.length; i++) {

            var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json.markers[i].lat,json.markers[i].lon)

            placemark.description= '<div style="color:#ff0303;font-weight:bold">'+json.markers[i].cname+'</div>';

            placemark.description = placemark.description+'<strong>Глубину:</strong> '+json.markers[i].address;

            markers.push(placemark);

            }  



            clusterer.setMarkers(markers); // добавляем маркеры в кластер

            clusterer.repaint( // обнавляем кластеры на карте

  }

else

{

alert('Произошла ошибка!');

}

})            

      }

    </script> 

  </head> 

  <body> 

    <div id="ymap" style="width:600px;height:400px"></div> 

  </body> 

</html> 


P.S. новичек сильно не пинайте


 

6 комментариев

Разобрался

 {placemark.setStyle("default#barIcon")};

добавил после

var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json.markers[i].lat,json.markers[i].lon)

 

или создаем стиль

YMaps.Styles.add("constructor#pmblmPlacemark", {

            iconStyle : {

                href : "ваша ссылка на png-шку",

                size : new YMaps.Point(28,29),

                offset: new YMaps.Point(-8,-27)

            }

        });

 

 

И воводим стиль

{placemark.setStyle(YMaps.Styles.get("constructor#pmblmPlacemark"))};

 

var opts = {

          centered: msie ? false : true, // if not IE use centered clusters

          grid: msie ? 70 : 50 // for IE grid is bigger

        };

для IE это не спасает, он все равно считает по другому - выход нашел, указав опцию bath:300, по у молчанию 400 - IE не помогло, но остальные стали счить как IE 

Если нужно назначить разные иконки кластерам, в зависимости от количества объектов, то это можно сделать в yandex.clusterer.js метод YandexCluster.prototype.showIcon=function(){....

после var d=new YMaps.Style; я добавил свою не замысловатую конструкцию, возможно не совсем красиво, но на быструю руку пойдет и работает :-), 

 

var myC = this.markers.length;   var iPref = '1'; // префик названия файла иконки маркера   var iSize = ''; // размер иконки маркера    var fSize = '15'; // размер шрифта   if(myC       iPref = '1';       iSize = '20';       fSize = '10';   }else if(myC>10 && myC       iPref = '2';       iSize = '30';   }else if(myC>30){       iPref = '3';       iSize = '35';       fSize = '18';   }      this.style=c.style||{        icon:"/images/map/cl_"+iPref+".png",        height:iSize,        width:iSize,        offset:[0,0],        textColor:"#ffffff",        textSize:fSize,        printable:false    };

 

спасибо, c иконками в кластере я попробую))

Подскажите, как это делается в версии 2?

что именно подсказать?