前端地图 SDK 集成指南：高德百度腾讯 Google Maps 初始化与配置

NPM 安装

npm install @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    key: '你的 KEY',
    version: '2.0',
    plugins: ['AMap.Scale', 'AMap.ToolBar']
}).then((AMap) => {
    const map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 12
    });
}).catch(e => console.error(e));

2. 百度地图（Baidu Map）

CDN 引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的 AK"></script>
<div id="baidu-map" style="width: 100%;height: 500px;"></div>
<script>
    const map = new BMap.Map('baidu-map');
    const point = new BMap.Point(116.404, 39.915); // 注意：百度使用 Point 对象
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true); // 启用滚轮缩放
</script>

NPM 安装

npm install baidumap-web-api --save

import { BMap } from 'baidumap-web-api';
const map = new BMap.Map('baidu-map');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

3. 腾讯地图（Tencent Map）

CDN 引入

<script src="https://map.qq.com/api/js?v=2.exp&key=你的 KEY"></script>
<div id="tencent-map" style="width: 100%;height: 500px;"></div>
<script>
    const map = new qq.maps.Map(document.getElementById('tencent-map'), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 12
    });
</script>

4. Google Maps

CDN 引入

<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的 API_KEY&callback=initMap"></script>
<div id="google-map" style="width: 100%;height: 500px;"></div>
<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById('google-map'), {
            center: { lat: 39.9042, lng: 116.4074 },
            zoom: 12
        });
    }
</script>

地图容器初始化核心参数解析

必填项：center & zoom

注意事项：

• 不同地图 SDK 的坐标顺序可能不同：
  • 高德、Google：[经度，纬度]
  • 百度：new BMap.Point(经度，纬度)
  • 腾讯：new qq.maps.LatLng(纬度，经度)

可选项一览表

初始化代码模板

<!-- 通用 HTML 结构 -->
<div id="my-map" style="width: 100vw;height: 100vh;"></div>

<!-- 高德地图 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
<script>
    const map = new AMap.Map('my-map', {
        center: [116.397428, 39.90923],
        zoom: 12,
        viewMode: '2D'
    });
</script>

<!-- 百度地图 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
<script>
    const map = new BMap.Map('my-map');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
</script>

<!-- 腾讯地图 -->
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script>
    const map = new qq.maps.Map(document.getElementById('my-map'), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 12
    });
</script>

<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById('my-map'), {
            center: { lat: 39.9042, lng: 116.4074 },
            zoom: 12
        });
    }
</script>

多平台统一接口封装

工厂模式实现

class UniversalMap {
    constructor(type, containerId, options) {
        this.type = type;
        this.container = document.getElementById(containerId);
        this.options = options;
        switch (type) {
            case 'amap': this.initAMap(); break;
            case 'baidu': this.initBaidu(); break;
            case 'tencent': this.initTencent(); break;
            case 'google': this.initGoogle(); break;
            default: throw new Error('Unsupported map type');
        }
    }

    initAMap() {
        this.map = new AMap.Map(this.container, {
            center: this.options.center || [116.397428, 39.90923],
            zoom: this.options.zoom || 12
        });
    }

    initBaidu() {
        this.map = new BMap.Map(this.container);
        this.map.centerAndZoom(new BMap.Point(...this.options.center), this.options.zoom || 12);
    }

    initTencent() {
        this.map = new qq.maps.Map(this.container, {
            center: new qq.maps.LatLng(...this.options.center),
            zoom: this.options.zoom || 12
        });
    }

    initGoogle() {
        this.map = new google.maps.Map(this.container, {
            center: { lat: this.options.center[1], lng: this.options.center[0] },
            zoom: this.options.zoom || 12
        });
    }

    addMarker(position) {
        switch (this.type) {
            case 'amap':
                new AMap.Marker({ position, map: this.map });
                break;
            case 'baidu':
                new BMap.Marker(new BMap.Point(...position)).addTo(this.map);
                break;
            case 'tencent':
                new qq.maps.Marker({ position: new qq.maps.LatLng(...position), map: this.map });
                break;
            case 'google':
                new google.maps.Marker({ position: { lat: position[1], lng: position[0] }, map: this.map });
                break;
        }
    }
}

// 使用示例
const myMap = new UniversalMap('amap', 'my-map', {
    center: [116.397428, 39.90923],
    zoom: 12
});
myMap.addMarker([116.397428, 39.90923]);

高频面试题 & 答案解析

章节知识点总结表格

思维导图回顾

• 引入地图 SDK
  • 引入方式：CDN、NPM、ES Module
  • 初始化参数：center、zoom、viewMode
  • 多平台封装：工厂模式、统一接口
  • 常见问题：容器宽高、密钥错误、懒加载优化

结语

本文涵盖了四种主流地图 SDK 的集成方案与核心配置，通过工厂模式实现了接口的统一化，有助于提升开发效率与维护性。