清泛IT社区

标题: 地图组件做App到底怎么选？我踩完6个坑，帮你总结了这份横评 [打印本页]

作者: App Inventor 2 时间: 2 小时前
标题: 地图组件做App到底怎么选？我踩完6个坑，帮你总结了这份横评

上周有个读者私信我："用App Inventor 2做了个附近美食地图App，标记点全偏到河里去了，这是bug吗？"——不是bug，是坐标系没搞对。今天就来聊聊App Inventor 2地图组件那些事，帮你少走弯路。

为什么要写这篇？

说实话，App Inventor 2的地图组件是我折腾过的最复杂的组件之一。别的组件（按钮、文本框、音频播放器）属性撑死十来个，Map组件光属性就三十多个，还有7个子组件（Marker、Circle、LineString、Polygon、Navigation、FeatureCollection、Rectangle），事件多到眼花。

但地图功能又是App开发中最高频的需求之一——附近的人、店铺导航、轨迹记录、区域划分……几乎每个稍微有点野心的App都会用到地图。

所以今天我不讲怎么拖组件（那个官方文档写得很清楚），而是从"选哪个方案"的角度，做一个横向评测。

我测试了哪些方案？

我在过去两周里，用以下6种方式分别实现了同一个需求：在地图上显示10个兴趣点，并规划从当前位置到某个兴趣点的步行路线。

方案 | 一句话描述
A. Map内嵌组件 | 直接拖Map组件，默认高德底图
B. Map+自定义瓦片URL | 用XYZ瓦片格式接入自定义底图
C. 原生SDK | 用Android Studio直接调高德SDK
D. WebViewer+网页地图 | 在WebViewer里加载Leaflet网页
E. Navigation组件 | AI2内置的导航封装
F. 手动Web API | 自己请求高德API解析JSON

第一关：出图速度——谁能最快让地图显示出来？

方案A是绝对的王者。 拖一个Map组件到Screen，设置宽高充满，保存，连手机，地图就出来了。中文网版本默认接的是高德地图，国内直接可用，不需要翻墙，不需要配API Key。这一步体验我给满分。

方案B也不差。 在方案A的基础上，把地图类型改成"自定义"，然后在自定义URL里填瓦片地址。比如你想用高德卫星图：

https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&style=6

其中style参数可以切换：6是卫星图，7是简图（带路名），8是详图。还可以用lang参数切中英文，scl参数切分辨率。玩法很多，但需要你先搞懂XYZ瓦片协议。

方案C直接劝退。 为了测这个方案我专门开了Android Studio项目，配了高德SDK，写了半天Gradle依赖问题都没解决……对于AI2的目标用户来说，原生开发的门槛太高了，完全失去了"积木编程"的意义。

方案D是个坑。 听起来很美好——"我前端很熟，用Leaflet十分钟就能画出漂亮地图"。但实际操作中，WebViewer和原生组件之间的手势冲突让人崩溃：你想缩放地图，结果触发了页面滚动；你想点击标记，结果触发了长按。这是唯一一个让我的App真正"卡死"的方案。

出图速度排名：A > B > D（功能受限） > C（门槛太高）

第二关：坐标安全——为什么你的标记点会"跑偏"？

这是开篇那个读者遇到的问题。解释一下原理：

中国大陆所有地图服务使用的是GCJ02坐标系（俗称"火星坐标"），而GPS硬件原始输出的是WGS84坐标。两者之间有一个非线性偏移，大约50-500米不等。

如果你的GPS传感器返回了WGS84坐标，你直接拿去在默认GCJ02的高德底图上打Marker，标记点就会"跑到河里"。

App Inventor 2怎么解决？

说实话，AI2中文网在这件事上做得非常贴心。Map组件直接提供了坐标体系属性：

• 选"高德坐标(GCJ02)" → 适配高德底图、国内常见地图数据
• 选"GPS坐标(WGS84)" → 适配原始GPS、海外地图数据

而且这个设置是全局生效的：中心点、所有Marker、Circle、LineString、Polygon的坐标、点击返回的坐标、用户位置——全部统一在一个坐标系下。不需要你手动做任何坐标转换。

但有个注意点： 如果你在用位置传感器，记得把位置传感器的坐标体系和Map的坐标体系保持一致，否则还是会有偏移。

其他方案就没这么省心了

• 原生SDK：需要手动调用坐标转换API
• WebViewer：需要在JavaScript层自己做转换
• 手动Web API：需要在请求URL里指定coordsys参数

坐标安全排名：AI2 Map（一键切换） > Navigation组件 > 其他所有需要手动处理的方案

第三关：导航能力——走路的学问

测试导航功能时，我对比了方案E（Navigation组件）和方案F（手动调API）。

Navigation组件体验

使用流程：
• 去高德开放平台申请一个API Key（免费，几分钟搞定）
• 设置Navigation组件的ApiKey、起点坐标、终点坐标
• 调用请求线路方法
• 在获得线路事件里，你会收到四样东西：
• 方向列表：["沿中山路向东走200米", "在路口右转", ...] 这种人类可读的导航指令
• 坐标列表：[[39.90, 116.39], [39.91, 116.40], ...] 路径上所有拐点的经纬度
• 距离：总距离（米）
• 持续时间：预估时间（秒）

然后把坐标列表传给LineString组件的点列表属性，路线就画在地图上了。

支持步行和汽车导航（自行车和公交暂不支持——文档里明确标注了），对我测试的场景来说够用了。

手动调API体验

我也试了用Web组件直接请求高德路径规划API。URL大概长这样：

https://restapi.amap.com/v3/direction/walking?origin=经度,纬度&destination=经度,纬度&key=你的key

返回的JSON嵌套了好几层（route → paths → steps → instruction），解析起来非常痛苦。在AI2里用列表和字典块一层层取数据，逻辑块越堆越多，稍不注意就取错字段。

而且方向列表需要自己从每个step的instruction字段里拼接，距离和时间也要自己累加。错误处理？得自己在收到文本事件里判断status字段。

说实话，如果不是Navigation组件不支持的功能（比如公交导航），完全没必要手动调API。

导航排名：Navigation组件（开箱即用） >> 手动Web API（自找麻烦）

第四关：批量标记——10个点你手动加，100个点怎么办？

这个维度是我最想聊的。

假设你要做一个"全国美食地图"，有500个餐厅要标在地图上。

笨方法： 拖500个Marker组件到设计器里，每个设置纬度、经度、标题、描述、图片……你的设计器会卡到打不开，逻辑代码也会膨胀到几百个块。

聪明方法： 用FeatureCollection组件，从网址加载一个GeoJSON文件。

GeoJSON是什么？简单说就是一个JSON文件，里面描述了一堆地理特征。比如：

{
  "type": "FeatureCollection",
  "features": [
{
   "type": "Feature",
   "geometry": {"type": "Point", "coordinates": [116.397, 39.903]},
   "properties": {
      "title": "天安门",
      "description": "北京地标",
      "image": "tiananmen.png",
      "fill": "#FF0000"
   }
}
// ... 可以有几百个
  ]
}

加载后，AI2会自动把每个Point转成Marker，每个LineString转成LineString组件，每个Polygon转成Polygon组件。属性也会自动映射：title→标题、description→描述、fill→填充色、image→图像素材……非常智能。

最关键的是： 不管你有多少个点，代码量是一样的——就是一个URL加载 + 一个事件处理。数据和展示完全分离，维护起来极其舒服。

批量标记排名：FeatureCollection（降维打击） > 手动创建Marker

隐藏彩蛋：Circle组件做地理围栏

很多人忽略了Circle组件。它不只是"画个圆"那么简单。

Circle的到坐标的距离方法可以判断某个点是否在圆内（返回0表示在圆内）。结合位置传感器，你可以实现：

• "靠近某店100米时推送优惠券"
• "离开某个区域时报警"
• "进入某个商圈时切换推荐内容"

这就是地理围栏功能。在原生开发里实现起来要写一堆后台服务和位置监听逻辑，在AI2里一个Circle + 一个Timer就搞定了。

综合评分

方案 | 易用性 | 功能 | 性能 | 推荐?
A. 内嵌Map | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |  首选
B. 自定义瓦片 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |  进阶
C. 原生SDK | ⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |  别折腾
D. WebViewer | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |  别踩坑
E. Navigation | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |  导航首选
F. 手动API | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |  仅补位用

我最终的推荐组合

经过两周的折腾，我的结论是：

底图用Map组件（方案A），需要自定义样式就切自定义瓦片URL（方案B），导航用Navigation组件（方案E），兴趣点用FeatureCollection加载GeoJSON。坐标体系务必检查清楚——GPS数据选WGS84，国内地图数据选GCJ02。

这套组合覆盖了90%的地图App需求，开发效率是原生SDK的5倍以上。

写在最后

地图组件是App Inventor 2中最复杂但也最强大的组件族之一。中文网做了大量本地化工作（高德底图替换、GCJ02支持、Navigation封装），使得国内开发者可以开箱即用。但正因为功能多、选项多，选型时更容易犯晕。

希望这篇横评能帮你在开始做地图App之前，就选对方向。

你在用App Inventor 2做地图App时踩过什么坑？欢迎到清泛社区讨论交流 :)

*参考资料：App Inventor 2 地图组件文档*

欢迎光临清泛IT社区 (https://bbs.tsingfun.com/)