2GIS地图API快速入门指南：从零开始创建交互式地图

2025-07-10 14:13:05作者：滕妙奇

概述

2GIS地图API是一套功能强大的地图开发工具，允许开发者在网页中创建交互式地图应用。通过这套API，开发者可以实现地图展示、标记添加、信息弹窗等常见地图功能，为网站或应用增添地理位置服务能力。

核心功能

地图展示：在网页中嵌入交互式地图
标记管理：在地图上添加标记点(Marker)
信息展示：通过弹窗(Popup)显示位置相关信息
地理搜索：支持坐标与地址的相互转换

快速开始

1. API接入

在HTML页面的<head>部分添加以下脚本引入2GIS地图API：

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>

2. 创建地图容器

在页面body中添加一个div元素作为地图容器，并设置合适的尺寸：

<div id="map" style="width:500px; height:400px"></div>

3. 初始化地图

使用JavaScript代码初始化地图实例：

<script type="text/javascript">
    var map;
    
    DG.then(function() {
        map = DG.map('map', {
            center: [54.98, 82.89],  // 初始中心点坐标[纬度,经度]
            zoom: 13                  // 缩放级别(1-18)
        });
    });
</script>

4. 添加地图标记

在地图上添加标记点：

DG.marker([54.98, 82.89]).addTo(map);

5. 添加交互弹窗

为标记点绑定点击弹窗：

DG.marker([54.98, 82.89])
    .addTo(map)
    .bindPopup('点击了我！');

完整示例代码

<!DOCTYPE html>
<html>
    <head>
        <title>2GIS地图API示例</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
        <script type="text/javascript">
            var map;
            
            DG.then(function() {
                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13
                });
                
                DG.marker([54.98, 82.89])
                    .addTo(map)
                    .bindPopup('点击了我！');
            });
        </script>
    </head>
    <body>
        <div id="map" style="width:500px; height:400px"></div>
    </body>
</html>