YMaps sample broken dashed line

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <!--
       Подключаем API карт
       Параметры:
         - load=package.standard - основные компоненты;
          - lang=ru-RU - язык русский.
   -->
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

<script type="text/javascript">
var myMap;

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    var myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center:[55.76, 37.64], // Москва
        zoom:17
    });
   
    // Ломаная
    var myPolyline = new ymaps.Polyline([
        // Координаты вершин ломаной.
        [55.7599, 37.6375],
        [55.759800, 37.6402],
        [55.7606, 37.6403]
    ], {
        hintContent: "ОСПД-8А"
    }, {
        strokeWidth: 5, // ширина линии
        draggable: true,
        // Первой цифрой задаем длину штриха. Второй цифрой задаем длину разрыва.
        strokeStyle: '2 2'
    });
   
    //alert(1);
    myMap.geoObjects.add(myPolyline);
   
    document.getElementById('destroyButton').onclick = function () {
     
        // Для уничтожения используется метод destroy.
        myMap.destroy();
    };

}
</script>
</head>

<body>
    <div id="map" style="width:600px; height:300px"></div>
    <input type="button" id="destroyButton" value="Удалить карту"/>
</body>

</html>


Примеры. Редактирование линии. http://api.yandex.ru/maps/doc/jsapi/2.x/examples/linestringedit.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>Примеры. Редактирование линии.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--
       Подключаем API карт 2.x
       Параметры:
         - load=package.full - полная сборка. Также подключаем модуль util.json для работы с JSON-объектами
          - lang=ru-RU - язык русский.
   -->
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full,util.json&lang=ru-RU"
           type="text/javascript"></script>

    <!--
       Основная библиотека JQuery.
       Яндекс предоставляет хостинг JavaScript-библиотек:
   -->
    <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);

        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [55.76, 37.64],
                    zoom: 10
                }),
                myGeometry = {
                    type: 'LineString',
                    coordinates: [
                        [55.86, 37.84],
                        [55.70, 37.55],
                        [55.8, 37.4]
                    ]
                },
                myOptions = {
                    strokeWidth: 6,
                    strokeColor: '#0000FF', // синий
                    draggable: true      // объект можно перемещать, зажав левую кнопку мыши
                };

            $('input').attr('disabled', false);

            // Обработка нажатия на любую кнопку.
            $('input').click(
                function () {
                    // Отключаем кнопки, чтобы на карту нельзя было
                    // добавить более одного редактируемого объекта (чтобы в них не запутаться).
                    $('input').attr('disabled', true);

                    // Создаем геообъект с определенной геометрией.
                    var myGeoobject = new ymaps.GeoObject({geometry: myGeometry}, myOptions);

                    // При визуальном редактировании геообъекта изменяется его геометрия.
                    // Тип геометрии измениться не может, однако меняются координаты.

                    // При изменении геометрии геообъекта будем выводить массив его координат.
                    myGeoobject.events.add('geometrychange', function (event) {
                        printGeometry(myGeoobject.geometry.getCoordinates());
                    });

                    // Размещаем геообъект на карте
                    myMap.geoObjects.add(myGeoobject);
                    // ... и выводим его координаты.
                    printGeometry(myGeoobject.geometry.getCoordinates());
                    // Подключаем к геообъекту редактор, позволяющий
                    // визуально добавлять/удалять/перемещать его вершины.
                    myGeoobject.editor.startEditing();

                });
        }
        // Выводит массив координат геообъекта в <div id="geometry">
        function printGeometry (coords) {
            $('#geometry').html('Координаты: ' + stringify(coords));

            function stringify (coords) {
                var res = '';
                if ($.isArray(coords)) {
                    res = '[ ';
                    for (var i = 0, l = coords.length; i < l; i++) {
                       if (i > 0) {
                            res += ', ';
                        }
                        res += stringify(coords[i]);
                    }
                    res += ' ]';
                } else if (typeof coords == 'number') {
                    res = coords.toPrecision(6);
                } else if (coords.toString) {
                    res = coords.toString();
                }

                return res;
            }
        }
    </script>
</head>

<body>
<h2>Редактирование линии</h2>

<div id="map" style="width: 600px; height: 300px"></div>
<input type="button" value="+ ломаная" id="addPolyline"/>

<div id="geometry"/>
</body>

</html>

Add at YMAP redDotIcon http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/GeoObject.xml#options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
///////
var myGeoObject = new ymaps.GeoObject({
        // Описываем геометрию типа "Точка".
        geometry: {
            type: "Point",
            coordinates: [55.76, 37.64]
        },
        // Описываем данные геообъекта.
        properties: {
            hintContent: "Москва",
            balloonContentHeader: "Москва",
            balloonContentBody: "Столица России",
            population: 11848762
        }
    }, {
        // Задаем пресет метки с точкой без содержимого.
        preset: "twirl#redDotIcon",
        // Включаем возможность перетаскивания.
        draggable: true,
        // Переопределяем макет содержимого нижней части балуна.
        balloonContentFooterLayout: ymaps.templateLayoutFactory.createClass(
            'население: $[properties.population], координаты: $[geometry.coordinates]'
        ),
        // Отключаем задержку закрытия всплывающей подсказки.
        hintHideTimeout: 0
    });
// Добавляем геообъект на карту.
myMap.geoObjects.add(myGeoObject);

Add YMap CONTROLS
Примеры. Элементы управления картой.
http://api.yandex.ru/maps/doc/jsapi/2.x/examples/mapcontrolsbasic.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);

        function init () {
            var myMap = new ymaps.Map('map', {
                    center: [56.136, 40.390],
                    zoom: 10
                });

            // Для добавления элемента управления на карту
            // используется поле controls, ссылающееся на
            // коллекцию элементов управления картой.
            // Добавление элемента в коллекцию производится
            // с помощью метода add().

            // В метод add можно передать строковый идентификатор
            // элемента управления и его параметры.
            myMap.controls
                // Кнопка изменения масштаба
                .add('zoomControl')
                // Список типов карты
                .add('typeSelector')
                // Кнопка изменения масштаба - компактный вариант
                // Расположим её справа
                .add('smallZoomControl', { right: 5, top: 75 })
                // Стандартный набор кнопок
                .add('mapTools');

            // Также в метод add можно передать экземпляр класса, реализующего определенный элемент управления.
            // Например, линейка масштаба ('scaleLine')
            myMap.controls
                .add(new ymaps.control.ScaleLine())
                // В конструкторе элемента управления можно задавать расширенные
                // параметры, например, тип карты в обзорной карте
                .add(new ymaps.control.MiniMap({
                    type: 'yandex#publicMap'
                }));
        }
    </script>
Tagged , , , . Bookmark the permalink.

Leave a Reply