Jump to content

Метки на яндекс карту


Recommended Posts

Здравствуйте! Хочу сделать карту с кластеризацией меток, но никак не пойму, как поставить свои названия метки iconCaption. Для создания использовал вот этот код: 

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9,
            behaviors: ['default', 'scrollZoom']
        }, {
            searchControlProvider: 'yandex#search'
        }),
        /**
         * Создадим кластеризатор, вызвав функцию-конструктор.
         * Список всех опций доступен в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
         */
            clusterer = new ymaps.Clusterer({
            /**
             * Через кластеризатор можно указать только стили кластеров,
             * стили для меток нужно назначать каждой метке отдельно.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
             */
            preset: 'islands#invertedVioletClusterIcons',
            /**
             * Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
             */
            groupByCoordinates: false,
            /**
             * Опции кластеров указываем в кластеризаторе с префиксом "cluster".
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
             */
            clusterDisableClickZoom: true,
            clusterHideIconOnBalloonOpen: false,
            geoObjectHideIconOnBalloonOpen: false
        }),
        /**
         * Функция возвращает объект, содержащий данные метки.
         * Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
         * Поле balloonContentBody - источник данных для контента балуна.
         * Оба поля поддерживают HTML-разметку.
         * Список полей данных, которые используют стандартные макеты содержимого иконки метки
         * и балуна геообъектов, можно посмотреть в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
         */
            getPointData = function (index) {
            return {
                balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
                balloonContentBody: '<p>Ваше имя: <input name="login"></p><p>Телефон в формате 2xxx-xxx:  <input></p><p><input type="submit" value="Отправить"></p>',
                balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
                clusterCaption: 'метка <strong>' + index + '</strong>'
            };
        },
        /**
         * Функция возвращает объект, содержащий опции метки.
         * Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
         */
            getPointOptions = function () {
            return {
                preset: 'islands#violetIcon'
            };
        },
        points = [
            [55.831903,37.411961], [55.763338,37.565466], [55.763338,37.565466], [55.744522,37.616378], [55.780898,37.642889], [55.793559,37.435983], [55.800584,37.675638], [55.716733,37.589988], [55.775724,37.560840], [55.822144,37.433781], [55.874170,37.669838], [55.716770,37.482338], [55.780850,37.750210], [55.810906,37.654142], [55.865386,37.713329], [55.847121,37.525797], [55.778655,37.710743], [55.623415,37.717934], [55.863193,37.737000], [55.866770,37.760113], [55.698261,37.730838], [55.633800,37.564769], [55.639996,37.539400], [55.690230,37.405853], [55.775970,37.512900], [55.775777,37.442180], [55.811814,37.440448], [55.751841,37.404853], [55.627303,37.728976], [55.816515,37.597163], [55.664352,37.689397], [55.679195,37.600961], [55.673873,37.658425], [55.681006,37.605126], [55.876327,37.431744], [55.843363,37.778445], [55.875445,37.549348], [55.662903,37.702087], [55.746099,37.434113], [55.838660,37.712326], [55.774838,37.415725], [55.871539,37.630223], [55.657037,37.571271], [55.691046,37.711026], [55.803972,37.659610], [55.616448,37.452759], [55.781329,37.442781], [55.844708,37.748870], [55.723123,37.406067], [55.858585,37.484980]
        ],
        geoObjects = [];

    /**
     * Данные передаются вторым параметром в конструктор метки, опции - третьим.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
     */
    for(var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
    }

    /**
     * Можно менять опции кластеризатора после создания.
     */
    clusterer.options.set({
        gridSize: 80,
        clusterDisableClickZoom: true
    });

    /**
     * В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
     */
    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    /**
     * Спозиционируем карту так, чтобы на ней были видны все объекты.
     */

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
});

 Вместо вот этого:

points = [
            [55.831903,37.411961], [55.763338,37.565466], [55.763338,37.565466], [55.744522,37.616378], [55.780898,37.642889], [55.793559,37.435983], [55.800584,37.675638], [55.716733,37.589988], [55.775724,37.560840], [55.822144,37.433781], [55.874170,37.669838], [55.716770,37.482338], [55.780850,37.750210], [55.810906,37.654142], [55.865386,37.713329], [55.847121,37.525797], [55.778655,37.710743], [55.623415,37.717934], [55.863193,37.737000], [55.866770,37.760113], [55.698261,37.730838], [55.633800,37.564769], [55.639996,37.539400], [55.690230,37.405853], [55.775970,37.512900], [55.775777,37.442180], [55.811814,37.440448], [55.751841,37.404853], [55.627303,37.728976], [55.816515,37.597163], [55.664352,37.689397], [55.679195,37.600961], [55.673873,37.658425], [55.681006,37.605126], [55.876327,37.431744], [55.843363,37.778445], [55.875445,37.549348], [55.662903,37.702087], [55.746099,37.434113], [55.838660,37.712326], [55.774838,37.415725], [55.871539,37.630223], [55.657037,37.571271], [55.691046,37.711026], [55.803972,37.659610], [55.616448,37.452759], [55.781329,37.442781], [55.844708,37.748870], [55.723123,37.406067], [55.858585,37.484980]
        ],

Вставил свои значения в виде такого же массива.

Теперь не могу понять как сюда вставить iconCaption:

 getPointData = function (index) {
            return {
                balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
                balloonContentBody: '<p>Ваше имя: <input name="login"></p><p>Телефон в формате 2xxx-xxx:  <input></p><p><input type="submit" value="Отправить"></p>',
                balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
                clusterCaption: 'метка <strong>' + index + '</strong>'
            };
        },

чтобы для каждой метки было свое название, а на не "метка 1", "метка 2" как сейчас. Названия меток есть в БД.

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

Link to post
Share on other sites

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

Не увидел.  Попробуйте так:

 getPointData = function (index) {
            return {
                balloonContent: [
				'<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
				'<br/>',
                '<p>Ваше имя: <input name="login"></p><p>Телефон в формате 2xxx-xxx:  <input></p><p><input type="submit" value="Отправить"></p>',
				'<br/>',
                '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
				'<br/>',
                'метка <strong>' + index + '</strong>'
				].join(),
				iconCaption: 'метка <strong>' + index + '</strong>'
            };
        },

 

 

Link to post
Share on other sites
28 минут назад, ndrkzlv сказал:

Через массив ymaps.Placemark нужно (пример: _webmap-blog.ru/bez-rubriki/klasterizaciya-v-api-yandeks-kart-2-x).

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

Link to post
Share on other sites
8 минут назад, serzh82 сказал:

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кластеризация меток на Яндекс.картах - API v 2.x</title>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript" src="http://yandex.st/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

ymaps.ready(init);

function init () {

var myMap = new ymaps.Map("map", {center: [56.316667, 44.0],zoom: 11});

myMap.controls.add("zoomControl")
.add("typeSelector")
.add("mapTools");

myGeoObjects = [];

$.getJSON("PHP_файл.php", function(json){ 
if (json.status == 'OK') {  
for (i = 0; i < json.markers.length; i++) {   
myPlacemark = new ymaps.Placemark([json.markers[i].lon, json.markers[i].lat], {

balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+json.markers[i].cname+'</div>',
balloonContentBody: '<strong>Адрес:</strong> '+json.markers[i].address,
 });             
myGeoObjects.push(myPlacemark);
}
clusterer = new ymaps.Clusterer();
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
}
else
{
alert('Произошла ошибка!');
}
})

}
</script>
</head>

<body>

<div id="map" style="width:800px; height:600px"></div>

</body>
</html>

PHP_файл.php

<?php

include("../../config.php");

header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {

$json = '{markers:['."\n";

$query1= "SELECT * FROM qiwiterminal";
$result1 = mysql_query($query1);

if(mysql_num_rows($result1)>0)
{
while ($par1 = mysql_fetch_array($result1)){

$cname =  'Теминал QIWI';

$exp_str = explode(",", $par1['coords']);

$lat = $exp_str[0];

$lng = $exp_str[1];

$json.= "\n".'{'.'"id": "'.$par1['id'].'",';

$json.= '"cname": "'.$cname.'",';

$json.= '"address": "'.$par1['address'].'",';
    
$json.= '"lat": "'.$lat.'",';

$json.=  '"lon": "'.$lng.'"';

$json.= '},';

}

$json = substr($json, 0,-1);

echo  $json;

echo '], ', "\n",  '"status": "OK"', "\n", '}';

}
else
{
echo '{"status": "false"}';
}

}

?>

 

Link to post
Share on other sites

С вопросом разобрался, может кому понадобится, ниже код

getPointData = function (index) {
			var arr = [<?php echo $com; ?>]; // здесь должен быть массив вида ['A','B','C','D']
			var cit = "<?php echo $cityss; ?>";
			var pho = [<?php echo $phoness; ?>];
			var ns = + index+ +"2";
			return {
                  balloonContentHeader: "<font size=3><b><a href=\/agency/"+ ns +">"+arr[index]+"</a></b></font>",
                  balloonContentBody: "<p>Регион работы: г."+cit+"</p><p>Телефон: "+ pho[index]+"</p>",
            //    balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
            //    clusterCaption: 'метка <strong>' + index + '</strong>',
				iconCaption: arr[index]
            };
        },

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...