选地图API服务商不能光看文档写得好不好——得自己动手跑一遍才知道。这篇文章用一个统一的Demo地图初始化 添加标记点 绘制折线把高德、百度、腾讯、丰图四家平台的JS SDK接入流程从头到尾走一遍。每个环节横向对比哪些参数名不一样、哪些类名不一样、哪些坑容易踩一目了然。目标是不管你最终选哪家都能在30分钟内跑通一个基础Demo。一、需求分析一个最小可用的地图Demo需要哪些能力在对比之前先明确我们要实现什么。一个最小可用的地图Demo核心功能就三个地图初始化在页面上渲染出一张可交互的地图添加标记点在地图上指定位置放置标记Marker绘制折线在地图上连接多个点绘制一条路线Polyline这三个功能覆盖了地图SDK最基础的使用场景展示、定位、路线。如果这三步能跑通后续加信息窗口、搜索、路径规划等功能就是在这个基础上扩展。二、环境准备2.1 获取API Key四家平台的Key申请流程基本一致注册账号 → 实名认证 → 创建应用 → 获取Key。区别主要在细节上平台注册地址Key参数名绑定方式丰图lbs.sfmap.com.cnak绑定域名白名单高德lbs.amap.comkey绑定域名白名单百度lbsyun.baidu.comak绑定域名白名单腾讯lbs.qq.comkey绑定域名白名单或IP注意四家都要求绑定域名白名单。本地调试时可以用localhost或127.0.0.1作为白名单域名。2.2 引入SDK在HTML页面中通过script标签引入各平台SDK!-- 丰图 -- script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEYv3.1/script !-- 高德 -- script srchttps://webapi.amap.com/maps?v2.0keyYOUR_KEY/script !-- 百度注意是BMapGL3D版本 -- script srchttps://api.map.baidu.com/api?typewebglv3.0akYOUR_AK/script !-- 腾讯 -- script srchttps://map.qq.com/api/gljs?v1.expkeyYOUR_KEY/script差异点丰图和百度的Key参数名是ak高德和腾讯是key百度使用的是BMapGL3D引擎不是老版的BMap腾讯使用的是gljsWebGL版本不是老版的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 });关键差异汇总维度丰图高德百度腾讯初始化类SFMap.MapAMap.MapBMapGL.MapTMap.Map中心点格式[lng, lat]数组[lng, lat]数组new BMapGL.Point(lng, lat)new TMap.LatLng(lat, lng)坐标顺序经度在前经度在前经度在前纬度在前设置中心方式构造参数构造参数单独调用centerAndZoom()构造参数2D/3D仅2DviewMode切换初始化选BMap/BMapGLviewMode切换⚠️ 踩坑提醒腾讯的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()添加到地图腾讯用的是批量模式MultiMarkergeometries数组支持一次添加多个标记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差异汇总维度丰图高德百度腾讯折线类名SFMap.FtLineAMap.PolylineBMapGL.PolylineTMap.MultiPolyline数据格式GeoJSON LineString经纬度数组Point数组LatLng数组坐标格式[lng, lat][lng, lat]Point(lng, lat)LatLng(lat, lng)添加方式map.addLayer()构造时传mapmap.addOverlay()构造时传map架构模式图层化SourceLayer覆盖物模式覆盖物模式批量几何模式⚠️ 关键差异丰图采用图层化架构GeoJSONSource FtLine和高德/百度的覆盖物模式完全不同。如果涉及到从其他平台迁移到丰图时折线绘制这部分需要重写不能直接翻译类名。四、完整Demo代码把上面的碎片拼起来就形成一个完整可运行的页面这里以丰图为例展现Demo!DOCTYPE html html head meta charsetutf-8 title丰图地图Demo/title style #map-container { width: 100%; height: 600px; } /style /head body div idmap-container/div script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEYv3.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视野调整方法名不同平台方法丰图map.fitBounds()高德map.setFitView()百度map.setViewport()腾讯map.fitBounds()丰图和腾讯的方法名一样高德和百度各不同。六、选型建议跑完Demo之后你可能会对四家平台有更直观的感受。几个建议追求上手速度高德文档最好示例最丰富遇到问题容易搜到解决方案从百度迁移丰图支持坐标系切换参数迁移成本相对低微信小程序场景腾讯有原生集成优势物流场景丰图在物流垂直场景有差异化能力100途经点、货车路径规划等预算敏感丰图2万/年的纯证书方案门槛最低可灵活搭配单接口前面因为篇幅原因只跑了一家的Demo建议每家都跑一遍Demo体感比看文档有用得多。