前端地图 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: 16.4074},
            zoom: 12
        });
    }
</script>

二、初始化核心参数解析

1. 必填项：center & zoom

注意事项： 不同地图 SDK 的坐标顺序存在差异，务必注意：

• 高德、Google：[经度，纬度]
• 百度：new BMap.Point(经度，纬度)
• 腾讯：new qq.maps.LatLng(纬度，经度)

2. 常用可选项

三、多平台统一接口封装

为减少重复代码，可采用工厂模式对多平台 SDK 进行统一封装。这样在切换地图服务商时，只需修改配置，无需改动业务逻辑。

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]);

四、常见问题与面试考点

在实际开发中，常遇到以下问题：

1. 地图容器必须设置宽高吗？ 是的。若容器宽高为 0，地图无法渲染。
2. 为什么有时地图加载空白？ 常见原因包括密钥错误、网络拦截、容器未挂载完成或脚本加载失败。
3. 如何动态改变地图中心点？ 调用各 SDK 提供的 setCenter() 或 panTo() 方法。
4. 缩放级别的取值范围是多少？ 通常为 1~20，具体取决于地图服务商。
5. NPM 方式和 CDN 方式的优劣对比？ NPM 更利于工程化管理和版本控制；CDN 加载速度快但依赖外部资源稳定性。
6. 多个地图实例能否共存于同一页面？ 可以，但需注意性能消耗和内存管理。
7. 如何监听页面加载完成事件？ 监听 complete 或 tilesloaded 事件。
8. 地图密钥泄露怎么办？ 立即在后台禁用旧密钥并申请新密钥，同时检查 Referer 白名单限制。
9. 什么是懒加载地图？ 页面滚动到可视区域时才初始化地图，可显著提升首屏速度。
10. 地图 SDK 版本升级需要注意什么？ 查阅官方迁移指南，重点关注 API 废弃情况和兼容性调整。