App Inventor 2 地图导航与电子围栏教程
本文涵盖:实时定位显示、地图标记、调用高德/百度导航、电子围栏(进出区域提醒)。
一、核心组件
| 组件 | 类型 | 作用 |
|---|---|---|
| 地图(Map) | 界面组件 | 显示地图、添加标记 |
| 标记(Marker) | 地图子组件 | 地图上的点标记 |
| 位置传感器(LocationSensor) | 传感器 | 获取GPS坐标 |
| 活动启动器(ActivityStarter) | 连接 | 调起外部导航App |
二、实时定位显示
2.1 界面设计
- 地图组件(充满屏幕)
- 标记组件(放在地图内)
- 标签:显示坐标
- 位置传感器(不可见)
2.2 代码块
三、地图标记(Marker)
3.1 添加固定标记
3.2 动态添加多个标记
四、调起外部导航App
App Inventor 2 没有内置导航功能,通过 ActivityStarter 调起高德/百度地图导航。4.1 调起高德地图导航
4.2 调起百度地图导航
4.3 通用方案(浏览器打开Google Maps)
五、电子围栏(进出区域提醒)
电子围栏:当用户进入或离开某个区域时,自动触发提醒。5.1 原理
计算当前位置与围栏中心的距离,与围栏半径比较:- 距离 < 半径 → 在围栏内
- 距离 > 半径 → 在围栏外
5.2 距离计算公式(Haversine公式)
5.3 电子围栏完整代码
六、实战:考勤打卡系统(电子围栏应用)
6.1 功能设计
- 设定公司位置为围栏中心,半径200米
- 进入围栏时自动记录上班打卡
- 离开围栏时自动记录下班打卡
- 打卡记录保存到网络微数据库
6.2 代码块
七、常见问题
Q1:位置传感器获取不到坐标?
- 确认已授予位置权限(Android 6+需运行时授权)
- 在室外或靠近窗户,GPS信号更好
- 可先用网络定位(精度低但快):
设置 位置传感器1.使用GPS = 假
Q2:地图显示空白?
- 检查网络连接(地图需要联网加载瓦片)
- 默认使用OpenStreetMap,国内访问可能较慢
Q3:高德地图调起失败?
- 确认手机已安装高德地图
- 检查包名是否正确(
com.autonavi.minimap) - 可先用通用浏览器方案作为备选
Q4:电子围栏精度不够?
- GPS精度通常10-20米,围栏半径建议 >= 100米
- 可用
位置传感器1.精度属性过滤低精度数据
参考资料
文档版本:2026.03 | 作者:App Inventor 2 中文网 www.fun123.cn
参考资料与版权声明
原文来源
- MIT App Inventor 官方文档 - MIT App Inventor
- MIT App Inventor Community - MIT App Inventor Community
- MIT App Inventor GitHub - MIT CML
版权声明
本文档基于 MIT App Inventor 官方文档及社区资源整理,版权归原作者所有:- MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权
- MIT App Inventor Community 帖子版权归原作者所有
