概述
App Inventor 2内置了Map组件（基于OpenStreetMap），也可以通过WebView集成高德地图。
已有文档：map_geofence.md 介绍了地图和电子围栏。本文聚焦高德地图集成。
内置Map vs 高德地图
| 特性 | 内置Map | 高德地图(WebView) |
|---|---|---|
| 地图数据 | OpenStreetMap | 高德 |
| 中国地图精度 | 一般 | 高 |
| 路线规划 | ❌ | ✅ |
| POI搜索 | ❌ | ✅ |
| 需要Key | ❌ | ✅ |
| 离线地图 | ❌ | ✅（部分） |
方案一：WebView + 高德JS API（推荐）
1. 获取高德Key
- 访问 https://lbs.amap.com/
- 注册开发者账号
- 创建Web端应用，获取JS API Key
2. HTML页面
<!-- amap.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
<style>html,body,#container{width:100%;height:100%;margin:0}</style>
</head>
<body><div id="container"></div>
<script>
var map = new AMap.Map('container', {zoom:14, center:[116.397428,39.90923]});
setInterval(function(){
var msg = window.AppInventor.getWebViewString();
if(msg && msg !== ""){
try {
var data = JSON.parse(msg);
if(data.cmd === "locate"){
map.setCenter([data.lng, data.lat]);
new AMap.Marker({position:[data.lng,data.lat], map:map, title:"我的位置"});
} else if(data.cmd === "route"){
AMap.plugin("AMap.Driving", function(){
var driving = new AMap.Driving({map:map});
driving.search(new AMap.LngLat(data.fromLng,data.fromLat),
new AMap.LngLat(data.toLng,data.toLat));
});
} else if(data.cmd === "search"){
AMap.plugin("AMap.PlaceSearch", function(){
var ps = new AMap.PlaceSearch({pageSize:5});
ps.search(data.keyword, function(status, result){
window.AppInventor.setWebViewString("SEARCH_RESULT:" + JSON.stringify(result));
});
});
}
} catch(e){}
}
},100);
</script>
</body>
</html>
3. App Inventor积木块
设 高德KEY = "your-amap-js-api-key"
当 Screen1.初始化
设 WebView_地图.主页地址 = "file:///android_asset/amap.html"
' 定位到当前位置
当 LocationSensor1.位置改变(纬度, 经度, 海拔, 速度)
设 JSON = "{""cmd"":""locate"",""lat"":" & 纬度 & ",""lng"":" & 经度 & "}"
设 WebView_地图.WebView字符串 = JSON
' 路线规划
当 按钮_导航.被点击
设 JSON = "{""cmd"":""route""," & _
"""fromLat"":" & 当前纬度 & ",""fromLng"":" & 当前经度 & "," & _
"""toLat"":" & 目标纬度 & ",""toLng"":" & 目标经度 & "}"
设 WebView_地图.WebView字符串 = JSON
' POI搜索
当 按钮_搜索.被点击
设 JSON = "{""cmd"":""search"",""keyword"":""" & 输入框_关键词.文本 & """}"
设 WebView_地图.WebView字符串 = JSON
方案二：使用内置Map组件
App Inventor内置Map组件基于OpenStreetMap：
当 Screen1.初始化
设 Map1.中心点 = 创建列表([39.90923, 116.397428])
设 Map1.缩放级别 = 14
' 添加标记
当 按钮_标记.被点击
设 标记 = 创建字典(
"position" → 创建列表([39.90923, 116.397428]),
"title" → "天安门",
"snippet" → "北京市东城区"
)
调用 Map1.添加标记(标记)
常见问题
Q1: 高德地图白屏？
- 检查API Key是否正确
- 确认Key类型是”Web端(JS API)”
- 检查网络连接
Q2: 定位不准？
- 在室外使用GPS定位
- LocationSensor的
ProviderName设为 “gps” - 高德定位需要额外配置（使用JS API的定位功能）
Q3: 路线规划不显示？
- 确认起终点坐标正确（经度在前，纬度在后）
- 检查是否加载了Driving插件
总结
| 方案 | 中国地图精度 | 功能 | 推荐度 |
|---|---|---|---|
| WebView + 高德JS | ⭐⭐⭐⭐⭐ | 完整 | ⭐⭐⭐⭐⭐ |
| 内置Map组件 | ⭐⭐⭐ | 基础 | ⭐⭐⭐ |
版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。
扫码添加客服咨询
