2gis-maps/dist/doc/ru/quickstart/quickstart.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="все-возможности api&amp;sdk 2гис">Все возможности API&amp;SDK 2ГИС</h2><p><a href="https://dev.2gis.ru">dev.2gis.ru</a></p>
<h2 id="полная-обновлённая документация">Полная обновлённая документация</h2><p><a href="https://docs.2gis.com/ru">docs.2gis.com/ru</a></p>
<h2 id="общие-сведения">Общие сведения</h2><p>При помощи API карт вы сможете:</p>
<ul class="list-v-disc">
<li><div class="restore-color"><span style="color:323232">создавать интерактивные карты на веб-странице;</span></div></li><li><div class="restore-color"><span style="color:323232">показывать на карте различные объекты (маркеры, попапы, геометрические объекты);</span></div></li><li><div class="restore-color"><span style="color:323232">производить поиск на карте: определять координаты геообъектов по их названиям и названия по координатам.</span></div></li></ul>
<p>Исходный код API карт доступен на <a href="https://github.com/2gis/mapsapi">GitHub</a>, проект открыт к предложениям и пулл-реквестам.</p>
<h3 id="начало-работы">Начало работы</h3><p>Ниже приведен простой пример создания карты.</p>
<h4 id="подключите-api">Подключите API</h4><p>Для подключения JavaScript кода API добавьте в секцию head HTML-страницы следующий код:</p>
<pre><code>&lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js?pkg=full&quot;&gt;&lt;/script&gt;
</code></pre><p>Если вас интересует подключение кода API с помощью npm, перейдите в раздел <a href="/doc/maps/ru/manual/dg-loading#npm">Подключение API</a>.</p>
<h4 id="создайте-контейнер карты">Создайте контейнер карты</h4><p>Для создания контейнера, в котором будет отображаться карта, необходимо добавить блочный HTML-элемент необходимого вам размера:</p>
<pre><code>&lt;body&gt;
    &lt;div id=&quot;map&quot; style=&quot;width:500px; height:400px&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre><h4 id="создайте-карту">Создайте карту</h4><p>Теперь все готово к тому, чтобы создать карту. Для этого добавьте следующий код в секцию head:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var map;

    DG.then(function () {
        map = DG.map(&#39;map&#39;, {
            center: [54.98, 82.89],
            zoom: 13
        });
    });
&lt;/script&gt;
</code></pre><p>В данном примере карта принимает два параметра:</p>
<ul>
<li><div class="restore-color"><span style="color:323232">center - координаты центра карты в формате [широта, долгота];</span></div></li><li><div class="restore-color"><span style="color:323232">zoom - коэффициент масштабирования в диапазоне от 1 до 18.</span></div></li></ul>
<h4 id="добавьте-маркер на карту">Добавьте маркер на карту</h4><p>После создания карты вы можете отобразить на ней маркер, добавив одну строку кода в написанный ранее код:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var map;

    DG.then(function () {
        map = DG.map(&#39;map&#39;, {
            center: [54.98, 82.89],
            zoom: 13
        });

        DG.marker([54.98, 82.89]).addTo(map);
    });
&lt;/script&gt;
</code></pre><h4 id="покажите-попап с информацией">Покажите попап с информацией</h4><p>Если немного расширить добавленную выше строку кода с маркером, тогда при клике в маркер будет отображаться попап
(всплывающий блок) с необходимой вам информацией:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var map;

    DG.then(function () {
        map = DG.map(&#39;map&#39;, {
            center: [54.98, 82.89],
            zoom: 13
        });

        DG.marker([54.98, 82.89]).addTo(map).bindPopup(&#39;Вы кликнули по мне!&#39;);
    });
&lt;/script&gt;
</code></pre><h4 id="всё-вместе">Всё вместе</h4><p>Результирующий код:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;API карт 2ГИС&lt;/title&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js?pkg=full&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            var map;

            DG.then(function () {
                map = DG.map(&#39;map&#39;, {
                    center: [54.98, 82.89],
                    zoom: 13
                });

                DG.marker([54.98, 82.89]).addTo(map).bindPopup(&#39;Вы кликнули по мне!&#39;);
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;width:500px; height:400px&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="дальнейшие-шаги">Дальнейшие шаги</h3><p>Всё получилось? Теперь можно ознакомиться с <a href="/doc/maps/ru/manual/dg-loading">руководством для разработчиков</a>
и <a href="/doc/maps/ru/examples/base">примерами использования</a>.</p>
<h3 id="техническая-поддержка">Техническая поддержка</h3><p>Если у вас возникли сложности в работе с API карт &mdash; <a href="mailto:api@2gis.ru">напишите нам письмо</a>
и мы обязательно поможем вам разобраться.</p>
<h3 id="порядок-определения стоимости">Порядок определения стоимости</h3><p>Порядок определения стоимости программного обеспечения вы можете найти по адресу <a href="https://docs.2gis.com/ru/prices">https://docs.2gis.com/ru/prices</a>.</p>