地图API接入对比：高德、百度、腾讯、丰图，30分钟跑通Demo

选地图API服务商，不能光看文档写得好不好——得自己动手跑一遍才知道。

这篇文章用一个统一的Demo（地图初始化 + 添加标记点 + 绘制折线），把高德、百度、腾讯、丰图四家平台的JS SDK接入流程从头到尾走一遍。每个环节横向对比，哪些参数名不一样、哪些类名不一样、哪些坑容易踩，一目了然。

目标是：不管你最终选哪家，都能在30分钟内跑通一个基础Demo。

一、需求分析：一个最小可用的地图Demo需要哪些能力？

在对比之前，先明确我们要实现什么。一个最小可用的地图Demo，核心功能就三个：

1. 地图初始化：在页面上渲染出一张可交互的地图
2. 添加标记点：在地图上指定位置放置标记（Marker）
3. 绘制折线：在地图上连接多个点，绘制一条路线（Polyline）

这三个功能覆盖了地图SDK最基础的使用场景：展示、定位、路线。如果这三步能跑通，后续加信息窗口、搜索、路径规划等功能就是在这个基础上扩展。

二、环境准备

2.1 获取API Key

四家平台的Key申请流程基本一致：注册账号 → 实名认证 → 创建应用 → 获取Key。区别主要在细节上：

注意：四家都要求绑定域名白名单。本地调试时，可以用 localhost 或 127.0.0.1 作为白名单域名。

2.2 引入SDK

在HTML页面中通过 <script> 标签引入各平台SDK：

<!-- 丰图 -->
<script src="https://lbs.sfmap.com.cn/sfmapsdk/map?ak=YOUR_APP_KEY&v=3.1"></script>

<!-- 高德 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>

<!-- 百度（注意是BMapGL，3D版本） -->
<script src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=YOUR_AK"></script>

<!-- 腾讯 -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

差异点：

• 丰图和百度的Key参数名是 ak，高德和腾讯是 key
• 百度使用的是 BMapGL（3D引擎），不是老版的 BMap
• 腾讯使用的是 gljs（WebGL版本），不是老版的 js

三、核心功能对比

3.1 地图初始化

四家平台的初始化方式差异不小，主要是类名和参数格式不同：

// ===== 丰图 =====

const fengtuMap = new SFMap.Map('map-container', {

center: [116.397428, 39.90923], // [经度, 纬度]

zoom: 12,

ak: 'YOUR_APP_KEY'

});



// ===== 高德 =====

const amap = new AMap.Map('map-container', {

center: [116.397428, 39.90923], // [经度, 纬度]

zoom: 12,

viewMode: '2D' // 可选 '2D' 或 '3D'

});



// ===== 百度（BMapGL） =====

const bmap = new BMapGL.Map('map-container');

const baiduPoint = new BMapGL.Point(116.397428, 39.90923);

bmap.centerAndZoom(baiduPoint, 12);

// 注意：百度初始化是分两步——先创建Map，再设置中心和缩放



// ===== 腾讯 =====

const tmap = new TMap.Map('map-container', {

center: new TMap.LatLng(39.90923, 116.397428), // 注意：纬度在前！

zoom: 12,

viewMode: '3D'

});

关键差异汇总：

⚠️ 踩坑提醒：腾讯的 TMap.LatLng 是纬度在前、经度在后，和另外三家都不一样。坐标传反了地图会飞到奇怪的位置。

3.2 添加标记点（Marker）

// ===== 丰图 =====

const fengtuMarker = new SFMap.Marker({

position: [116.397428, 39.90923],

map: fengtuMap

});



// ===== 高德 =====

const amapMarker = new AMap.Marker({

position: [116.397428, 39.90923],

map: amap

});



// ===== 百度 =====

const baiduMarker = new BMapGL.Marker(baiduPoint);

bmap.addOverlay(baiduMarker);

// 注意：百度是 addOverlay，不是 add



// ===== 腾讯 =====

const tmapMarker = new TMap.MultiMarker({

map: tmap,

geometries: [{

id: 'marker-1',

styleId: 'marker-1',

position: new TMap.LatLng(39.90923, 116.397428)

}]

});

差异点：

• 高德和丰图的Marker用法几乎一致（都是 new Marker({position, map})）
• 百度用的是覆盖物模式：先创建Marker对象，再通过 addOverlay() 添加到地图
• 腾讯用的是批量模式：MultiMarker + geometries 数组，支持一次添加多个标记

3.3 绘制折线（Polyline/Line）

这是差异最大的部分。四家平台用了完全不同的类名和数据格式：

// ===== 丰图（图层化架构） =====

// 丰图使用图层化架构，折线不是覆盖物，而是图层

const lineSource = new SFMap.GeoJSONSource({

features: [{

type: 'Feature',

geometry: {

type: 'LineString',

coordinates: [

[116.397428, 39.90923],

[116.407428, 39.91923],

[116.417428, 39.92923]

]

}

}]

});



const lineLayer = new SFMap.FtLine({

id: 'route-line',

source: lineSource,

style: {

color: '#3388ff',

width: 4

}

});



fengtuMap.addLayer(lineLayer);

// 注意：丰图用 addLayer()，不是 add()

// ===== 高德 =====

const amapPolyline = new AMap.Polyline({

path: [

[116.397428, 39.90923],

[116.407428, 39.91923],

[116.417428, 39.92923]

],

strokeColor: '#3388ff',

strokeWeight: 4,

map: amap

});

// ===== 百度 =====

const baiduPolyline = new BMapGL.Polyline([

new BMapGL.Point(116.397428, 39.90923),

new BMapGL.Point(116.407428, 39.91923),

new BMapGL.Point(116.417428, 39.92923)

], {

strokeColor: '#3388ff',

strokeWeight: 4

});

bmap.addOverlay(baiduPolyline);

// 百度用 addOverlay()

// ===== 腾讯 =====

const tmapPolyline = new TMap.MultiPolyline({

map: tmap,

geometries: [{

id: 'route-line',

styleId: 'polyline-1',

styles: {

'polyline-1': new TMap.PolylineStyle({

color: '#3388ff',

width: 4

})

},

paths: [

new TMap.LatLng(39.90923, 116.397428),

new TMap.LatLng(39.91923, 116.407428),

new TMap.LatLng(39.92923, 116.417428)

]

}]

});

折线API差异汇总：

⚠️ 关键差异：丰图采用图层化架构（GeoJSONSource + FtLine），和高德/百度的覆盖物模式完全不同。如果涉及到从其他平台迁移到丰图时，折线绘制这部分需要重写，不能直接翻译类名。

四、完整Demo代码

把上面的碎片拼起来，就形成一个完整可运行的页面，这里以丰图为例展现Demo：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>丰图地图Demo</title>

<style>

#map-container {

width: 100%;

height: 600px;

}

</style>

</head>

<body>

<div id="map-container"></div>

<script src="https://lbs.sfmap.com.cn/sfmapsdk/map?ak=YOUR_APP_KEY&v=3.1"></script>

<script>

// 1. 初始化地图

const map = new SFMap.Map('map-container', {

center: [116.397428, 39.90923], // 北京

zoom: 12,

ak: 'YOUR_APP_KEY'

});

// 2. 添加标记点

const marker = new SFMap.Marker({

position: [116.397428, 39.90923],

map: map

});

// 3. 绘制折线

const lineSource = new SFMap.GeoJSONSource({

features: [{

type: 'Feature',

geometry: {

type: 'LineString',

coordinates: [

[116.397428, 39.90923],

[116.427428, 39.91923],

[116.457428, 39.90923]

]

}

}]

});

const lineLayer = new SFMap.FtLine({

id: 'demo-line',

source: lineSource,

style: {

color: '#3388ff',

width: 4

}

});

map.addLayer(lineLayer);

// 4. 调整视野适应折线范围

map.fitBounds(lineSource.getBounds());

</script>

</body>

</html>

五、踩坑记录

根据实际接入经验，整理几个最容易卡住的地方：

坑1：丰图的ak在Header里，不在URL里

调用丰图的REST API（如路径规划）时，ak是放在HTTP Header里传递的，不是URL参数。但JS SDK的引入链接里ak是在URL参数里的。两个场景不一样，别搞混了。

坑2：腾讯坐标顺序是纬度在前

TMap.LatLng(纬度, 经度)，其他三家都是经度在前。从其他平台迁移到腾讯时，所有坐标都要翻转。

坑3：百度用 addOverlay 不是 add

百度添加任何覆盖物（Marker、Polyline、Polygon）都是用 map.addOverlay()。高德和丰图用 map.add() 或 map.addLayer()。

坑4：丰图的折线不是覆盖物

丰图用的是图层化架构（GeoJSONSource + FtLine），添加折线要用 map.addLayer()，不是 map.add()。如果你习惯了高德/百度的覆盖物模式，这个差异需要注意。

坑5：视野调整方法名不同

丰图和腾讯的方法名一样，高德和百度各不同。

六、选型建议

跑完Demo之后，你可能会对四家平台有更直观的感受。几个建议：

• 追求上手速度：高德文档最好，示例最丰富，遇到问题容易搜到解决方案
• 从百度迁移：丰图支持坐标系切换参数，迁移成本相对低
• 微信小程序场景：腾讯有原生集成优势
• 物流场景：丰图在物流垂直场景有差异化能力（100途经点、货车路径规划等）
• 预算敏感：丰图2万/年的纯证书方案门槛最低，可灵活搭配单接口

前面因为篇幅原因，只跑了一家的Demo，建议每家都跑一遍Demo，体感比看文档有用得多。