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

2025-07-10 05:43:33作者：滕妙奇

概述

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>

进阶学习

完成基础地图创建后，开发者可以进一步探索2GIS地图API的更多功能：

地图控件添加（缩放控件、比例尺等）
绘制几何图形（多边形、折线等）
实现地理编码与逆地理编码
集成地点搜索功能
自定义地图样式

技术要点解析

DG.then：确保API完全加载后再执行地图初始化代码
DG.map：创建地图实例的核心方法
center参数：接受[纬度,经度]格式的坐标数组
zoom参数：数值越大，地图显示越详细
链式调用：标记创建、添加和弹窗绑定可以流畅地链式调用

最佳实践建议

始终在DG.then回调中执行地图相关操作
为地图容器设置明确的尺寸
考虑移动端适配，使用响应式尺寸
合理选择初始缩放级别，确保用户体验
弹窗内容可以使用HTML实现更丰富的展示效果

通过本指南，开发者可以快速掌握2GIS地图API的基础使用方法，为项目添加专业的地图功能。随着对API的深入探索，开发者可以实现更复杂的地图交互和应用场景。

登录后查看全文

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

昇腾LLM分布式训练框架

flutter_flutter

TorchAir 支持用户基于PyTorch框架和torch_npu插件在昇腾NPU上使用图模式进行推理。

ohos_react_native

React Native鸿蒙化仓库