[Примеры] Яндекс.Карты API (Yandex.Maps API)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Подключаем API -->
    <!-- Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/load-docpage/ -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>

<!-- Создаём контейнер для карты -->
<div id="map" style="width: 600px; height: 400px"></div>

<!-- Создаём карту -->
<script type="text/javascript">
    // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);

    function init() {
        // Создание карты.
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
            // Порядок по умолчнию: «широта, долгота».
            center: [55.76, 37.64],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 12,
            // Элементы управления
            // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
            controls: [

                'zoomControl', // Ползунок масштаба
                'rulerControl', // Линейка
                'routeButtonControl', // Панель маршрутизации
                'trafficControl', // Пробки
                'typeSelector', // Переключатель слоев карты
                'fullscreenControl', // Полноэкранный режим

                // Поисковая строка
                new ymaps.control.SearchControl({
                    options: {
                        // вид - поисковая строка
                        size: 'large',
                        // Включим возможность искать не только топонимы, но и организации.
                        provider: 'yandex#search'
                    }
                })

            ]
        });

        // Добавление метки
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
        var myPlacemark = new ymaps.Placemark([55.76, 37.64], {
            // Хинт показывается при наведении мышкой на иконку метки.
            hintContent: 'Содержимое всплывающей подсказки',
            // Балун откроется при клике по метке.
            balloonContent: 'Содержимое балуна'
        });

        // После того как метка была создана, добавляем её на карту.
        myMap.geoObjects.add(myPlacemark);

    }
</script>
</body>
</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

<!DOCTYPE html>

<head>

</head>

<body>

// Функция ymaps.ready() будет вызвана, когда

// загрузятся все компоненты API, а также когда будет готово DOM-дерево.

ymaps.ready(init);

function init() {

// Создание карты.

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/

var myMap = new ymaps.Map("map", {

// Координаты центра карты.

// Порядок по умолчнию: «широта, долгота».

center: [55.76, 37.64],

// Уровень масштабирования. Допустимые значения:

// от 0 (весь мир) до 19.

zoom: 12,

// Элементы управления

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/

controls: [

'zoomControl', // Ползунок масштаба

'rulerControl', // Линейка

'routeButtonControl', // Панель маршрутизации

'trafficControl', // Пробки

'typeSelector', // Переключатель слоев карты

'fullscreenControl', // Полноэкранный режим

// Поисковая строка

new ymaps.control.SearchControl({

options: {

// вид - поисковая строка

size: 'large',

// Включим возможность искать не только топонимы, но и организации.

provider: 'yandex#search'

}

})

]

});

// Добавление метки

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/

var myPlacemark = new ymaps.Placemark([55.76, 37.64], {

// Хинт показывается при наведении мышкой на иконку метки.

hintContent: 'Содержимое всплывающей подсказки',

// Балун откроется при клике по метке.

balloonContent: 'Содержимое балуна'

});

// После того как метка была создана, добавляем её на карту.

myMap.geoObjects.add(myPlacemark);

}

</script>

</body>

</html>

ymaps.ready(init);
function init() {

    // Создание карты.
    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 12,
    });

    // Строка с адресом, который необходимо геокодировать
    var address = 'Москва, ул. Льва Толстого, 16';

    // Ищем координаты указанного адреса
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode-docpage/
    var geocoder = ymaps.geocode(address);

    // После того, как поиск вернул результат, вызывается callback-функция
    geocoder.then(
        function (res) {

            // координаты объекта
            var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

            // Добавление метки (Placemark) на карту
            var placemark = new ymaps.Placemark(
                coordinates, {
                    'hintContent': address,
                    'balloonContent': 'Время работы: Пн-Пт, с 9 до 20'
                }, {
                    'preset': 'islands#redDotIcon'
                }
            );

            myMap.geoObjects.add(placemark);
        }
    );

}

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

ymaps.ready(init);

function init() {

// Создание карты.

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 12,

});

// Строка с адресом, который необходимо геокодировать

var address = 'Москва, ул. Льва Толстого, 16';

// Ищем координаты указанного адреса

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode-docpage/

var geocoder = ymaps.geocode(address);

// После того, как поиск вернул результат, вызывается callback-функция

geocoder.then(

function (res) {

// координаты объекта

var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

// Добавление метки (Placemark) на карту

var placemark = new ymaps.Placemark(

coordinates, {

'hintContent': address,

'balloonContent': 'Время работы: Пн-Пт, с 9 до 20'

}, {

'preset': 'islands#redDotIcon'

}

);

myMap.geoObjects.add(placemark);

}

);

}

ymaps.ready(init);
function init() {

    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8,
    });

    // Все виды меток
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

    // Метка без содержимого с точкой в центре
    var placemark1 = new ymaps.Placemark([55.85616623021352, 36.66577266479298], {
        hintContent: 'Метка 1',
    }, {
        'preset': 'islands#nightDotIcon'
    });

    myMap.geoObjects.add(placemark1);

    // Метка в виде круга с точкой в центре
    var placemark2 = new ymaps.Placemark([55.843805428478326, 37.03381465698029], {
        hintContent: 'Метка 2',
    }, {
        'preset': 'islands#greenCircleDotIcon'
    });

    myMap.geoObjects.add(placemark2);

    // Метка с текстом
    var placemark3 = new ymaps.Placemark([55.85616623000242, 37.429322469480205], {
        hintContent: 'Метка 3',
        iconContent: 'Метка 3'
    }, {
        'preset': 'islands#yellowStretchyIcon'
    });

    myMap.geoObjects.add(placemark3);

    // Собственное изображение для метки с контентом
    var placemark4 = new ymaps.Placemark([55.79741725173239, 37.775391805417016], {
        hintContent: 'Собственный значок метки с контентом',
    }, {
        // Опции.

        // Необходимо указать данный тип макета.
        iconLayout: 'default#image',

        // Своё изображение иконки метки.
        iconImageHref: '//codd-wd.ru/wp-content/examples/pic/web-app-development-q32.png',
        // Размеры метки.
        iconImageSize: [32, 32],
        // Смещение левого верхнего угла иконки относительно
        // её "ножки" (точки привязки).
        iconImageOffset: [-16, -16],
    });

    myMap.geoObjects.add(placemark4);
}

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

ymaps.ready(init);

function init() {

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8,

});

// Все виды меток

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

// Метка без содержимого с точкой в центре

var placemark1 = new ymaps.Placemark([55.85616623021352, 36.66577266479298], {

hintContent: 'Метка 1',

}, {

'preset': 'islands#nightDotIcon'

});

myMap.geoObjects.add(placemark1);

// Метка в виде круга с точкой в центре

var placemark2 = new ymaps.Placemark([55.843805428478326, 37.03381465698029], {

hintContent: 'Метка 2',

}, {

'preset': 'islands#greenCircleDotIcon'

});

myMap.geoObjects.add(placemark2);

// Метка с текстом

var placemark3 = new ymaps.Placemark([55.85616623000242, 37.429322469480205], {

hintContent: 'Метка 3',

iconContent: 'Метка 3'

}, {

'preset': 'islands#yellowStretchyIcon'

});

myMap.geoObjects.add(placemark3);

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

var placemark4 = new ymaps.Placemark([55.79741725173239, 37.775391805417016], {

hintContent: 'Собственный значок метки с контентом',

}, {

// Опции.

// Необходимо указать данный тип макета.

iconLayout: 'default#image',

// Своё изображение иконки метки.

iconImageHref: '//codd-wd.ru/wp-content/examples/pic/web-app-development-q32.png',

// Размеры метки.

iconImageSize: [32, 32],

// Смещение левого верхнего угла иконки относительно

// её "ножки" (точки привязки).

iconImageOffset: [-16, -16],

});

myMap.geoObjects.add(placemark4);

}

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){
    if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
});

1

2

3

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){

if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.

});

<div id="cityShop">
    <label for="cities">Город</label>:
    <select name="cities" id="cities"></select>
    <ul id="shops"></ul>
</div>

<div id="map" style="width: 100%; height: 300px"></div>

1

2

3

4

5

6

7

<label for="cities">Город</label>:

</div>

var myMap;
var placemarkCollections = {};
var placemarkList = {};

// Список городов и магазинов в них
var shopList = [
    {
        'cityName': 'Москва',
        'shops': [
            {'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},
            {'coordinates': [55.701677873469, 37.57358050756649], 'name': 'Ленинский проспект, 47с2'}
        ]
    },
    {
        'cityName': 'Санкт-Петербург',
        'shops': [
            {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
            {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
        ]
    }
];

ymaps.ready(init);

function init() {

    // Создаем карту
    myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8,
        controls: [
            'zoomControl'
        ],
        zoomMargin: [20]
    });

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

        // Добавляем название города в выпадающий список
        $('select#cities').append('<option value="' + i + '">' + shopList[i].cityName + '</option>');

        // Создаём коллекцию меток для города
        var cityCollection = new ymaps.GeoObjectCollection();

        for (var c = 0; c < shopList[i].shops.length; c++) {
            var shopInfo = shopList[i].shops[c];

            var shopPlacemark = new ymaps.Placemark(
                shopInfo.coordinates,
                {
                    hintContent: shopInfo.name,
                    balloonContent: shopInfo.name
                }
            );

            if (!placemarkList[i]) placemarkList[i] = {};
            placemarkList[i][c] = shopPlacemark;

            // Добавляем метку в коллекцию
            cityCollection.add(shopPlacemark);

        }

        placemarkCollections[i] = cityCollection;

        // Добавляем коллекцию на карту
        myMap.geoObjects.add(cityCollection);

    }

    $('select#cities').trigger('change');
}


// Переключение города
$(document).on('change', $('select#city'), function () {
    var cityId = $('select#cities').val();

    // Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города
    myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){
        if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
    });

    $('#shops').html('');
    for (var c = 0; c < shopList[cityId].shops.length; c++) {
        $('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');
    }

});

// Клик на адрес
$(document).on('click', '#shops li', function () {

    var cityId = $('select#cities').val();
    var shopId = $(this).val();

    placemarkList[cityId][shopId].events.fire('click');
});

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

var myMap;

var placemarkCollections = {};

var placemarkList = {};

// Список городов и магазинов в них

var shopList = [

{

'cityName': 'Москва',

'shops': [

{'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},

{'coordinates': [55.701677873469, 37.57358050756649], 'name': 'Ленинский проспект, 47с2'}

]

},

{

'cityName': 'Санкт-Петербург',

'shops': [

{'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},

{'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}

]

}

];

ymaps.ready(init);

function init() {

// Создаем карту

myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8,

controls: [

'zoomControl'

],

zoomMargin: [20]

});

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

// Добавляем название города в выпадающий список

$('select#cities').append('<option value="' + i + '">' + shopList[i].cityName + '</option>');

// Создаём коллекцию меток для города

var cityCollection = new ymaps.GeoObjectCollection();

for (var c = 0; c < shopList[i].shops.length; c++) {

var shopInfo = shopList[i].shops[c];

var shopPlacemark = new ymaps.Placemark(

shopInfo.coordinates,

{

hintContent: shopInfo.name,

balloonContent: shopInfo.name

}

);

if (!placemarkList[i]) placemarkList[i] = {};

placemarkList[i][c] = shopPlacemark;

// Добавляем метку в коллекцию

cityCollection.add(shopPlacemark);

}

placemarkCollections[i] = cityCollection;

// Добавляем коллекцию на карту

myMap.geoObjects.add(cityCollection);

}

$('select#cities').trigger('change');

}

// Переключение города

$(document).on('change', $('select#city'), function () {

var cityId = $('select#cities').val();

// Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города

myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){

if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.

});

$('#shops').html('');

for (var c = 0; c < shopList[cityId].shops.length; c++) {

$('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');

}

});

// Клик на адрес

$(document).on('click', '#shops li', function () {

var cityId = $('select#cities').val();

var shopId = $(this).val();

placemarkList[cityId][shopId].events.fire('click');

});

<span id="aw">Адрес: <span id="address"></span></span>
<div id="map" style="width: 100%; height: 400px"></div>

1 2	<span id="aw">Адрес: <span id="address"></span></span> <div id="map" style="width: 100%; height: 400px"></div>

ymaps.ready(init);
function init() {

    var myMap = new ymaps.Map("map", {
        center: [56, 37],
        zoom: 8
    });

    var geolocation = ymaps.geolocation;

    geolocation.get({
        // Выставляем опцию для определения положения по ip
        provider: 'yandex',
        // Карта автоматически отцентрируется по положению пользователя.
        mapStateAutoApply: true,
        // Включим автоматическое геокодирование результата.
        autoReverseGeocode: true
    }).then(function (result) {

        // Выведем результат геокодирования.
        myMap.geoObjects.add(result.geoObjects);

        var address = result.geoObjects.get(0).properties.get('text');
        document.getElementById('address').innerText = address;

        // Выведем в консоль результат геокодирования.
        console.log(result.geoObjects.get(0).properties.get('metaDataProperty'));

    });
}

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

ymaps.ready(init);

function init() {

var myMap = new ymaps.Map("map", {

center: [56, 37],

zoom: 8

});

var geolocation = ymaps.geolocation;

geolocation.get({

// Выставляем опцию для определения положения по ip

provider: 'yandex',

// Карта автоматически отцентрируется по положению пользователя.

mapStateAutoApply: true,

// Включим автоматическое геокодирование результата.

autoReverseGeocode: true

}).then(function (result) {

// Выведем результат геокодирования.

myMap.geoObjects.add(result.geoObjects);

var address = result.geoObjects.get(0).properties.get('text');

document.getElementById('address').innerText = address;

// Выведем в консоль результат геокодирования.

console.log(result.geoObjects.get(0).properties.get('metaDataProperty'));

});

}

/* Делаем карту чёрно-белой */
#map {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix
        type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

1

2

3

4

5

6

/* Делаем карту чёрно-белой */

#map {

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix

type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

}

// В бесплатной версии API Яндекс.Карт есть ограничение на 25000 запросов в сутки к геокодеру
// Подробнее https://tech.yandex.ru/maps/doc/enterprise/concepts/about-enterprise-docpage/

// Адрес, координаты которого необходимо получить
$address = 'Россия, Москва, Тверская 6с1';

// Отправляем запрос к геокодеру
if ( ! $geocode = @file_get_contents( 'http://geocode-maps.yandex.ru/1.x/?geocode=' . urlencode( $address ) ) ) {
	$error = error_get_last();
	throw new Exception( 'HTTP request failed. Error: ' . $error['message'] );
}

$xml = new SimpleXMLElement( $geocode );

$xml->registerXPathNamespace( 'ymaps', 'http://maps.yandex.ru/ymaps/1.x' );
$xml->registerXPathNamespace( 'gml', 'http://www.opengis.net/gml' );

$result = $xml->xpath( '/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos' );

if ( isset( $result[0] ) ) {

	list( $longitude, $latitude ) = explode( ' ', $result[0] );

	echo $latitude; // Широта
	echo $longitude; // Долгота
}

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

// В бесплатной версии API Яндекс.Карт есть ограничение на 25000 запросов в сутки к геокодеру

// Подробнее https://tech.yandex.ru/maps/doc/enterprise/concepts/about-enterprise-docpage/

// Адрес, координаты которого необходимо получить

$address = 'Россия, Москва, Тверская 6с1';

// Отправляем запрос к геокодеру

if ( ! $geocode = @file_get_contents( 'http://geocode-maps.yandex.ru/1.x/?geocode=' . urlencode( $address ) ) ) {

$error = error_get_last();

throw new Exception( 'HTTP request failed. Error: ' . $error['message'] );

}

$xml = new SimpleXMLElement( $geocode );

$xml->registerXPathNamespace( 'ymaps', 'http://maps.yandex.ru/ymaps/1.x' );

$xml->registerXPathNamespace( 'gml', 'http://www.opengis.net/gml' );

$result = $xml->xpath( '/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos' );

if ( isset( $result[0] ) ) {

list( $longitude, $latitude ) = explode( ' ', $result[0] );

echo $latitude; // Широта

echo $longitude; // Долгота

}

ymaps.ready(init);

function init(){
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 12
    });

    // Отключаем scrollZoom
    // Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#map.behavior.Manager__param-behaviors
    myMap.behaviors.disable('scrollZoom');

}

1

2

3

4

5

6

7

8

9

10

11

12

13

ymaps.ready(init);

function init(){

var myMap = new ymaps.Map("map", {

center: [55.76, 37.64],

zoom: 12

});

// Отключаем scrollZoom

// Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#map.behavior.Manager__param-behaviors

myMap.behaviors.disable('scrollZoom');

}

ymaps.ready(init);

function init(){
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 12,
        controls: [] // Убираем все элементы управления
    });
}

1

2

3

4

5

6

7

8

9

ymaps.ready(init);

function init(){

var myMap = new ymaps.Map("map", {

center: [55.76, 37.64],

zoom: 12,

controls: [] // Убираем все элементы управления

});

}

<label for="address">Адрес: <input type="text" id="address" style="width: 500px;"> </label>

1	<label for="address">Адрес: <input type="text" id="address" style="width: 500px;"> </label>

// Выпадающая панель с поисковыми подсказками
// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/SuggestView-docpage/
var suggestView = new ymaps.SuggestView(
    'address', // ID input'а
    {
        offset: [-2, 3], // Отступы панели подсказок от её положения по умолчанию. Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.
        width: 300, // Ширина панели подсказок
        results: 3, // Максимальное количество показываемых подсказок.
    });

1

2

3

4

5

6

7

8

9

// Выпадающая панель с поисковыми подсказками

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/SuggestView-docpage/

var suggestView = new ymaps.SuggestView(

'address', // ID input'а

{

offset: [-2, 3], // Отступы панели подсказок от её положения по умолчанию. Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.

width: 300, // Ширина панели подсказок

results: 3, // Максимальное количество показываемых подсказок.

});

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Подключаем API -->
    <!-- Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/load-docpage/ -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    <!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- https://github.com/yandex/mapsapi-area -->
    <script src="https://yastatic.net/s3/mapsapi-jslibs/area/0.0.1/util.calculateArea.min.js" type="text/javascript"></script>
</head>
<body>


<button id="startDrawing">Включить режим редактирования</button>
<button id="stopDrawing">Отключить режим редактирования</button>
<br>
<button id="calculateArea">Определить площадь полигона</button>

<!-- Создаём контейнер для карты -->
<div id="map" style="width: 100%; height: 300px"></div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<head>

</head>

<body>

<button id="startDrawing">Включить режим редактирования</button>

<button id="stopDrawing">Отключить режим редактирования</button>

<br>

<button id="calculateArea">Определить площадь полигона</button>

</body>

</html>

// Функция ymaps.ready() будет вызвана, когда
// загрузятся все компоненты API, а также когда будет готово DOM-дерево.
ymaps.ready(init);

function init() {
    // Создание карты.
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
    var myMap = new ymaps.Map("map", {
        // Координаты центра карты.
        // Порядок по умолчнию: «широта, долгота».
        center: [55.76, 37.64],
        // Уровень масштабирования. Допустимые значения:
        // от 0 (весь мир) до 19.
        zoom: 12,
        // Элементы управления
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
        controls: [
            'zoomControl', // Ползунок масштаба
        ]
    });

    // Добавление метки
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
    var myPlacemark = new ymaps.Placemark([55.76, 37.64], {}, {
        'preset': 'islands#greenCircleDotIcon'
    });

    // После того как метка была создана, добавляем её на карту.
    myMap.geoObjects.add(myPlacemark);

    /**
     * Рисуем квадратый полигон шириной 5000 метров с центром в месте установки метки
     ***************************************************************
     */
    // Определяем координаты вершин ломаных, определяющих внешнюю и внутренние границы многоугольника
    var width05 = 5000 / 2;

    var startPoint = myPlacemark.geometry.getCoordinates(),

        // ymaps.coordSystem.geo.solveDirectProblem - решает первую (прямую) геодезическую задачу:
        // где мы окажемся, если выйдем из указанной точки в указанном направлении и пройдём, не сворачивая, указанное расстояние.
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ICoordSystem-docpage/#method_detail__solveDirectProblem

        // Вверх от центра на 250 метров
        azimuthT = 1.570796, //вверх
        directionT = [Math.sin(azimuthT), Math.cos(azimuthT)],
        topPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionT, width05).endPoint,

        // Влево на 250 метров (координаты левой верхней вершины)
        azimuthTL = 3.141593, // влево
        directionTL = [Math.sin(azimuthTL), Math.cos(azimuthTL)],
        topLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTL, width05).endPoint,

        // Вправо на 250 метров (координаты правой верхней вершины)
        azimuthTR = 0, // вправо
        directionTR = [Math.sin(azimuthTR), Math.cos(azimuthTR)],
        topRightPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTR, width05).endPoint,

        // Вниз от центра на 250 метров
        azimuthB = -1.570796, // вниз
        directionB = [Math.sin(azimuthB), Math.cos(azimuthB)],
        bottomPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionB, width05).endPoint,

        // Влево на 250 метров (координаты левой нижней вершины)
        azimuthBL = 3.141593, // влево
        directionBL = [Math.sin(azimuthBL), Math.cos(azimuthBL)],
        bottomLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBL, width05).endPoint,

        // Вправо на 250 метров (координаты правой нижней вершины)
        azimuthBR = 0, // вправо
        directionBR = [Math.sin(azimuthBR), Math.cos(azimuthBR)],
        bottomRightPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBR, width05).endPoint;


    // Рисуем полигон
    // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Polygon-docpage/
    var myPolygon = new ymaps.Polygon([
        // Координаты внешнего контура
        [
            topLeftPoint,
            topRightPoint,
            bottomRightPoint,
            bottomLeftPoint,
            topLeftPoint,
        ],
        [] // Координаты внутреннего контура
    ], {}, {
        // Курсор в режиме добавления новых вершин.
        editorDrawingCursor: "crosshair",
        // Максимально допустимое количество вершин.
        editorMaxPoints: 10,
        fill: true, // Наличие заливки
        fillColor: '0066ff99', // Цвет заливки.
        strokeColor: '0000FF', // Цвет обводки.
        strokeWidth: 5, // Ширина обводки.

        // Убираем возможность добавлять внутренний контур в режиме редактирования
        editorMenuManager: function (t) {
            return t.filter(function (t) {
                return "addInterior" !== t.id
            });
        }
    });

    myMap.geoObjects.add(myPolygon);

    // Включаем режим редактирования полигона
    $('#startDrawing').on('click', function () {
        myPolygon.editor.startDrawing();
    });

    // Отключаем режим редактирования полигона
    $('#stopDrawing').on('click', function () {
        myPolygon.editor.stopDrawing();
        myPolygon.editor.stopEditing();
    });

    // Определяем площадь полигона
    // Для расчета площади используется модуль mapsapi-area
    // https://github.com/yandex/mapsapi-area
    ymaps.ready(['util.calculateArea']).then(function () {

        $('#calculateArea').on('click', function() {

            // Вычисляем площадь геообъекта.
            var area = Math.round(ymaps.util.calculateArea(myPolygon));

            // Если площадь превышает 1 000 000 м², то приводим ее к км².
            if (area <= 1e6) {
                area += ' м²';
            } else {
                area = (area / 1e6).toFixed(3) + ' км²';
            }

            alert('Площадь полигона ' + area);
        });

    });
}

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

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

// Функция ymaps.ready() будет вызвана, когда

// загрузятся все компоненты API, а также когда будет готово DOM-дерево.

ymaps.ready(init);

function init() {

// Создание карты.

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/

var myMap = new ymaps.Map("map", {

// Координаты центра карты.

// Порядок по умолчнию: «широта, долгота».

center: [55.76, 37.64],

// Уровень масштабирования. Допустимые значения:

// от 0 (весь мир) до 19.

zoom: 12,

// Элементы управления

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/

controls: [

'zoomControl', // Ползунок масштаба

]

});

// Добавление метки

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/

var myPlacemark = new ymaps.Placemark([55.76, 37.64], {}, {

'preset': 'islands#greenCircleDotIcon'

});

// После того как метка была создана, добавляем её на карту.

myMap.geoObjects.add(myPlacemark);

/**

* Рисуем квадратый полигон шириной 5000 метров с центром в месте установки метки

***************************************************************

*/

// Определяем координаты вершин ломаных, определяющих внешнюю и внутренние границы многоугольника

var width05 = 5000 / 2;

var startPoint = myPlacemark.geometry.getCoordinates(),

// ymaps.coordSystem.geo.solveDirectProblem - решает первую (прямую) геодезическую задачу:

// где мы окажемся, если выйдем из указанной точки в указанном направлении и пройдём, не сворачивая, указанное расстояние.

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ICoordSystem-docpage/#method_detail__solveDirectProblem

// Вверх от центра на 250 метров

azimuthT = 1.570796, //вверх

directionT = [Math.sin(azimuthT), Math.cos(azimuthT)],

topPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionT, width05).endPoint,

// Влево на 250 метров (координаты левой верхней вершины)

azimuthTL = 3.141593, // влево

directionTL = [Math.sin(azimuthTL), Math.cos(azimuthTL)],

topLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTL, width05).endPoint,

// Вправо на 250 метров (координаты правой верхней вершины)

azimuthTR = 0, // вправо

directionTR = [Math.sin(azimuthTR), Math.cos(azimuthTR)],

topRightPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTR, width05).endPoint,

// Вниз от центра на 250 метров

azimuthB = -1.570796, // вниз

directionB = [Math.sin(azimuthB), Math.cos(azimuthB)],

bottomPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionB, width05).endPoint,

// Влево на 250 метров (координаты левой нижней вершины)

azimuthBL = 3.141593, // влево

directionBL = [Math.sin(azimuthBL), Math.cos(azimuthBL)],

bottomLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBL, width05).endPoint,

// Вправо на 250 метров (координаты правой нижней вершины)

azimuthBR = 0, // вправо

directionBR = [Math.sin(azimuthBR), Math.cos(azimuthBR)],

bottomRightPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBR, width05).endPoint;

// Рисуем полигон

// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Polygon-docpage/

var myPolygon = new ymaps.Polygon([

// Координаты внешнего контура

[

topLeftPoint,

topRightPoint,

bottomRightPoint,

bottomLeftPoint,

topLeftPoint,

],

[] // Координаты внутреннего контура

], {}, {

// Курсор в режиме добавления новых вершин.

editorDrawingCursor: "crosshair",

// Максимально допустимое количество вершин.

editorMaxPoints: 10,

fill: true, // Наличие заливки

fillColor: '0066ff99', // Цвет заливки.

strokeColor: '0000FF', // Цвет обводки.

strokeWidth: 5, // Ширина обводки.

// Убираем возможность добавлять внутренний контур в режиме редактирования

editorMenuManager: function (t) {

return t.filter(function (t) {

return "addInterior" !== t.id

});

}

});

myMap.geoObjects.add(myPolygon);

// Включаем режим редактирования полигона

$('#startDrawing').on('click', function () {

myPolygon.editor.startDrawing();

});

// Отключаем режим редактирования полигона

$('#stopDrawing').on('click', function () {

myPolygon.editor.stopDrawing();

myPolygon.editor.stopEditing();

});

// Определяем площадь полигона

// Для расчета площади используется модуль mapsapi-area

// https://github.com/yandex/mapsapi-area

ymaps.ready(['util.calculateArea']).then(function () {

$('#calculateArea').on('click', function() {

// Вычисляем площадь геообъекта.

var area = Math.round(ymaps.util.calculateArea(myPolygon));

// Если площадь превышает 1 000 000 м², то приводим ее к км².

if (area <= 1e6) {

area += ' м²';

} else {

area = (area / 1e6).toFixed(3) + ' км²';

}

alert('Площадь полигона ' + area);

});

}

[Примеры] Яндекс.Карты API (Yandex.Maps API)

1. Подключение API, создание контейнера для карты и создание карты

2. Добавление метки по адресу с использованием геокодера

3. Стилизация меток

4. Масштабирование карты так, чтобы было видно все объекты

5. Добавление и переключение нескольких коллекций меток

6. Определение местоположения пользователя

7. Как изменить цветовую палитру Яндекс.Карты

8. Как получить координаты объекта на PHP

9. Как отключить scrollZoom на Яндекс.Карте

10. Как удалить все элементы управления на Яндекс.Карте

11. Создание выпадающей панели с поисковыми подсказками адресов

12. Работа с полигонами в Yandex.Maps