欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

【前端地图】 引入地图 SDK（高德/百度/腾讯/Google Maps)——CDN 引入、NPM 安装、初始化地图容器、设置中心点与缩放级别

2026-03-07 分类：服务器技术 阅读(55) 评论(0)

第2节 | 引入地图 SDK（高德/百度/腾讯/Google Maps） 🧰

🎯 学习目标

老曹说：“别光看热闹，动手试试才是王道！今天教你如何‘召唤’地图神兽。”

  • 🚀 掌握多种方式引入地图 SDK（CDN、NPM、ES Module）
  • 🧱 学会初始化地图容器并设置基础参数
  • 🔧 灵活配置中心点与缩放级别
  • 🛠️ 实现多平台 SDK 的快速切换封装

    • 🧠 引言：地图 SDK 是啥玩意儿？

    简单来说，地图 SDK 就是一套封装好的 JavaScript 库，帮你搞定地图渲染、交互、数据加载等一系列复杂操作。你可以把它想象成一个“地图遥控器”，只要按下几个按钮，就能让地图乖乖听话。

    老曹吐槽时间：
    “有些同学问我能不能自己写个地图引擎？当然可以啊，只要你不怕头发掉光、肝爆熬夜……还是用现成的吧，别头铁。”

    🌐 一、四大主流地图 SDK 引入方式详解

    1.1 高德地图（AMap）📦

    ✅ CDN 引入（最快上手）

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8" />
    <title>高德地图 Demo</title>
    <!– 引入高德地图 JS API –>
    <script src="https://webapi.amap.com/maps?v=2.0&key=你的KEY"></script>
    </head>
    <body>
    <div id="map-container" style="width: 100%; height: 500px;"></div>
    <script>
    // 初始化地图
    const map = new AMap.Map('map-container', {
    center: [116.397428, 39.90923], // 中心点坐标（天安门）
    zoom: 12, // 缩放级别
    viewMode: '2D' // 显示模式
    });
    </script>
    </body>
    </html>

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

    1.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);

    1.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>

    1.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>

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

    2.1 必填项：center & zoom

    参数名类型示例值说明
    center Array / Object / LatLng [116.397428, 39.90923] 地图中心点坐标
    zoom Number 12 缩放级别（通常 1~20）

    📌 注意事项：

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

    2.2 可选项一览表

    参数名默认值功能描述
    viewMode '2D' 显示模式（2D / 3D）
    pitch 0 俯仰角（仅 3D 模式有效）
    rotation 0 旋转角度
    mapStyle 'normal' 地图样式（标准 / 卫星 / 夜间等）
    dragEnable true 是否允许拖拽
    zoomEnable true 是否允许缩放

    🔧 三、初始化代码模板（一键复制）

    <!– 通用 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>

    🔄 四、多平台统一接口封装（进阶技巧）

    老曹灵魂拷问：“每个地图 SDK 都要写一套代码？太麻烦了吧！封装一下不香吗？”

    4.1 封装思路（工厂模式）

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

    🧪 五、高频面试题 & 答案解析

    序号问题答案要点
    Q1 地图容器必须设置宽高吗？ 是的，否则地图无法渲染（默认宽高为 0）
    Q2 为什么有时地图加载空白？ 密钥错误、网络拦截、容器未挂载完成
    Q3 如何动态改变地图中心点？ 调用 setCenter() 方法
    Q4 缩放级别的取值范围是多少？ 通常为 1~20，具体取决于地图服务商
    Q5 NPM 方式和 CDN 方式的优劣对比？ NPM 更利于工程化管理；CDN 加载更快但依赖外部资源
    Q6 多个地图实例能否共存于同一页面？ 可以，但需注意性能消耗
    Q7 如何监听页面加载完成事件？ 监听 complete 或 tilesloaded 事件
    Q8 地图密钥泄露怎么办？ 立即在后台禁用旧密钥并申请新密钥
    Q9 什么是懒加载地图？ 页面滚动到可视区域时才初始化地图，提升首屏速度
    Q10 地图 SDK 版本升级需要注意什么？ 查阅官方迁移指南，兼容性调整

    📊 六、章节知识点总结表格

    类别关键词掌握程度建议
    引入方式 CDN、NPM、ES Module 必须掌握 ✅
    初始化参数 center、zoom、viewMode 必须掌握 ✅
    统一封装 工厂模式、适配器模式 理解原理即可 📘
    面试考点 容器宽高、懒加载、版本升级 必背清单 📝

    🧠 七、思维导图回顾

    #mermaid-svg-7kLFqbeFNgG3yu1j{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-7kLFqbeFNgG3yu1j .error-icon{fill:#552222;}#mermaid-svg-7kLFqbeFNgG3yu1j .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7kLFqbeFNgG3yu1j .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7kLFqbeFNgG3yu1j .marker.cross{stroke:#333333;}#mermaid-svg-7kLFqbeFNgG3yu1j svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7kLFqbeFNgG3yu1j p{margin:0;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge{stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 text{fill:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth–1{stroke-width:17;}#mermaid-svg-7kLFqbeFNgG3yu1j .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-0{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-0{stroke-width:14;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-1{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-1{stroke-width:11;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 text{fill:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-2{stroke-width:8;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-3{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-3{stroke-width:5;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-4{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-4{stroke-width:2;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-5{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-5{stroke-width:-1;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-6{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-6{stroke-width:-4;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-7{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-7{stroke-width:-7;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-8{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-8{stroke-width:-10;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-9{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-9{stroke-width:-13;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 polygon,#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 text{fill:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .node-icon-10{font-size:40px;color:black;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .edge-depth-10{stroke-width:-16;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled circle,#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:lightgray;}#mermaid-svg-7kLFqbeFNgG3yu1j .disabled text{fill:#efefef;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-root rect,#mermaid-svg-7kLFqbeFNgG3yu1j .section-root path,#mermaid-svg-7kLFqbeFNgG3yu1j .section-root circle,#mermaid-svg-7kLFqbeFNgG3yu1j .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-7kLFqbeFNgG3yu1j .section-root text{fill:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-root span{color:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .section-2 span{color:#ffffff;}#mermaid-svg-7kLFqbeFNgG3yu1j .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-7kLFqbeFNgG3yu1j .edge{fill:none;}#mermaid-svg-7kLFqbeFNgG3yu1j .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-7kLFqbeFNgG3yu1j :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

    引入地图SDK

    引入方式

    CDN

    NPM

    ES Module

    初始化参数

    center

    zoom

    viewMode

    多平台封装

    工厂模式

    统一接口

    常见问题

    容器宽高

    密钥错误

    懒加载优化

    🎉 结语：地图 SDK 已成功“召唤”！

    老曹寄语：“恭喜你迈出第二步！接下来我们就要开始玩花活了——给地图加点料！”
    下一节课我们将深入探讨地图的基本操作控制，让你的地图不再只是静态摆设！

    📌 作业布置：
    分别用四种 SDK 初始化一个地图，并添加一个标记点到当前位置。
    👉 提交方式：评论区打卡 or 私聊老曹领取反馈哦～

    赞(0)
    未经允许不得转载：171主机测评 » 【前端地图】 引入地图 SDK（高德/百度/腾讯/Google Maps)——CDN 引入、NPM 安装、初始化地图容器、设置中心点与缩放级别
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(64462)#python(21485)#开发语言(17876)#java(16446)#运维(16203)#linux(15677)#大数据(15345)#服务器(13684)#算法(12323)#前端(11681)#ai(10307)#网络(9929)#数据库(9530)#c++(8682)#学习(7182)#课程设计(7035)#机器学习(7019)#区块链(6066)#后端(5550)#OpenClaw(5416)#spring boot(5307)#深度学习(5284)#c语言(4560)#安全(4502)#毕业设计(4401)#数据结构(4343)#架构(4182)#docker(4121)#javascript(3988)#大模型(3928)

    热门文章

    最新文章

    归档

    分类