2gis-maps/dist/doc/ru/manual/dg-migration.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="руководство-по переходу на api 20">Руководство по переходу на API 2.0</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#описание">Описание</a></li><li><a href="#подключение-api">Подключение API</a></li><li><a href="#инициализация-карты">Инициализация карты</a></li><li><a href="#отображение-маркера">Отображение маркера</a></li><li><a href="#отображение-группы маркеров">Отображение группы маркеров</a></li><li><a href="#отображение-маркера с привязанным попапом">Отображение маркера с привязанным попапом</a></li><li><a href="#отображение-попапа">Отображение попапа</a></li><li><a href="#отображение-элемента управления">Отображение элемента управления</a></li><li><a href="#подписка-на события">Подписка на события</a></li></ul></dl></p>
<h3 id="описание">Описание</h3><p>Раздел содержит примеры кода основных возможностей, которые помогут вам прейти с API карт
версии 1.0 на API карт версии 2.0.</p>
<h3 id="подключение-api">Подключение API</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/map/#toc-load">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/loading">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>&lt;script src=&quot;<a href="https://maps.api.2gis.ru/1.0&quot;&gt;&lt;/script&amp;gt">https://maps.api.2gis.ru/1.0&quot;&gt;&lt;/script&amp;gt</a>;

                    DG.autoload(function() {
                        // инициализация карты
                        ...
                    });</code>
            </td>
            <td>
                <code>&lt;script src=&quot;<a href="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&quot;&gt;&lt;/script&amp;gt">https://maps.api.2gis.ru/2.0/loader.js?pkg=full&quot;&gt;&lt;/script&amp;gt</a>;

                DG.then(function() {
                    // инициализация карты
                    ...
                });</code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="инициализация-карты">Инициализация карты</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/map/#toc-init">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/map#dgmap">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>var map = new DG.Map(&#39;map&#39;);
                <nobr>var center = new DG.GeoPoint(82.89, 55.98);</nobr>
                map.setCenter(center, 13);</code>
            </td>
            <td>
                <code>var map = DG.map(&#39;map&#39;, {
                    <nobr>&#39;center&#39;: [54.98, 82.89],</nobr>
                    &#39;zoom&#39;: 13
                });</code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="отображение-маркера">Отображение маркера</h3><p>Добавление на карту маркера с картинкой по умолчанию:</p>
<table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/markers/#toc-base">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/markers#dgmarker">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>var position = new DG.GeoPoint(82.89, 54.98);</nobr>
                var marker = new DG.Markers.Common({
                    geoPoint: position
                });
                map.markers.add(marker);</code>
            </td>
            <td>
                <code><nobr>DG.marker([54.98, 82.89]).addTo(map);</nobr></code>
            </td>
        </tr>
    </tbody>
</table>

<p>Добавление на карту маркера с адаптивной пользовательской картинкой:</p>
<table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/utils/#fun-getAdaptiveAcon">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/markers#dgicon">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>var position = new DG.GeoPoint(82.89, 54.98);</nobr>
                var desktopParams = [
                    &#39;desktop-icon.png&#39;,
                    24, 24,
                    function() {
                        return new DG.Point(-12, -12)
                    }
                ];
                var mobileParams = [
                    &#39;{density}-icon.png&#39;,
                    34, 34,
                    function() {
                        return new DG.Point(-17, -17)
                    }
                ];
                var myIcon = DG.Utils.getAdaptiveIcon({
                    desktop: desktopParams,
                    mobile:  mobileParams
                });
                var marker = new DG.Markers.Common({
                    geoPoint: position,
                    icon: myIcon
                });
                map.markers.add(marker);</code>
            </td>
            <td>
                <code>var myIcon = DG.icon({
                    iconUrl: &#39;my-icon.png&#39;,
                    <nobr>iconRetinaUrl: &#39;my-icon@2x.png&#39;,</nobr>
                    iconSize: [24, 24],
                    iconAnchor: [-12, -12]
                });
                DG.marker([54.98, 82.89], {
                    icon: myIcon
                }).addTo(map);</code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="отображение-группы маркеров">Отображение группы маркеров</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/markers/#toc-dgmarkersgroup">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/other-layers#dglayergroup">Версия 2.0</a></td></tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>map.markers.createGroup(&#39;myGroup&#39;);</nobr>
                map.markers.add(marker1, &#39;myGroup&#39;);
                map.markers.add(marker2, &#39;myGroup&#39;);
                map.markers.add(marker3, &#39;myGroup&#39;);</code>
            </td>
            <td>
                <code><nobr>DG.layerGroup([marker1, marker2])</nobr>
                .addLayer(marker3).addTo(map);</code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="отображение-маркера с привязанным попапом">Отображение маркера с привязанным попапом</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/markers/#toc-dgmarkersballoon">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/base-classes#layer-bindpopup">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>var position = new DG.GeoPoint(82.89, 54.98);</nobr>
                var marker = new DG.Markers.MarkerWithBalloon({
                    geoPoint: position,
                    balloonOptions: {
                        contentHtml: &#39;Я бабочка!&#39;
                    }
                });
                map.markers.add(marker);</code>
                            </td>
                            <td>
                <code>DG.marker([54.98, 82.89])
                <nobr>.addTo(map).bindPopup(&#39;Я бабочка!&#39;);</nobr></code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="отображение-попапа">Отображение попапа</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/balloons/#balloon-intro">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/popup#dgpopup">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>var position = new DG.GeoPoint(82.89, 54.98);</nobr>
                var myBalloon = new DG.Balloons.Common({
                    geoPoint: position,
                    contentHtml: &#39;Привет!&#39;
                });
                map.balloons.add(myBalloon);</code>
            </td>
            <td>
                <code>DG.popup()
                .setLatLng([54.98, 82.89])
                .setContent(&#39;Привет!&#39;)
                .addTo(map);</code>
            </td>
        </tr>
    </tbody>
</table>

<h3 id="отображение-элемента управления">Отображение элемента управления</h3><p>Отображение пользовательского элемента управления в правом верхнем углу карты:</p>
<table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/controls/#toc-intro">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/controls">Версия 2.0</a></td></tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>var myControl = new MyControl();
                var positionOffset = new DG.Point(0, 0);
                var position = new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, positionOffset);
                map.controls.add(myControl, null, position);</code>
            </td>
            <td>
                <code><nobr>DG.control({ position: &#39;topright&#39; })</nobr>
                .addTo(map)</code>
            </td>
        </tr>
    </tbody>
</table>


<h3 id="подписка-на события">Подписка на события</h3><table>
    <thead>
        <tr>
            <td><a href="/doc/maps/1.0/manual/events/#toc-intro">Версия 1.0</a></td>
            <td><a href="/doc/maps/ru/manual/base-classes#events">Версия 2.0</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code><nobr>var callback = function(e) {</nobr>
                    console.log(e.getPoint());
                };
                map.addEventListener(map.getContainerId(), &#39;DgClick&#39;, callback);</code>
            </td>
            <td>
                <code><nobr>map.on(&#39;click&#39;, function(e) {</nobr>
                    console.log(e.latlng);
                });</code>
            </td>
        </tr>
    </tbody>
</table>