App Inventor 2 高德地图集成教程 - 定位导航与路线规划

• 概述
  • 内置Map vs 高德地图
• 方案一：WebView + 高德JS API（推荐）
  • 1. 获取高德Key
  • 2. HTML页面
  • 3. App Inventor积木块
• 方案二：使用内置Map组件
• 常见问题
  • Q1: 高德地图白屏？
  • Q2: 定位不准？
  • Q3: 路线规划不显示？
• 总结

« 返回首页

概述

本平台内置Map组件默认使用高德底图与GCJ02坐标，也可以通过WebViewer集成高德JS API。MIT上游的默认配置与本平台不同。

已有文档：map_geofence.md 介绍了地图和电子围栏。本文聚焦高德地图集成。

内置Map vs 高德地图

方案一：WebView + 高德JS API（推荐）

1. 获取高德Key

1. 访问 https://lbs.amap.com/
2. 注册开发者账号
3. 创建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积木块

global 高德KEY = "your-amap-js-api-key"

when Screen1.Initialize() {
  WebViewer1.HomeUrl = "file:///android_asset/amap.html"
}

// 定位到当前位置
when LocationSensor1.LocationChanged(latitude, longitude, altitude, speed) {
  global JSON = join("{\"cmd\":\"locate\",\"lat\":", latitude, ",\"lng\":", longitude, "}")
  WebViewer1.WebViewString = JSON
}

// 路线规划
when 按钮_导航.Click() {
  global JSON = join("{\"cmd\":\"route\",\"fromLat\":", 当前纬度, ",\"fromLng\":", 当前经度, ",\"toLat\":", 目标纬度, ",\"toLng\":", 目标经度, "}")
  WebViewer1.WebViewString = JSON
}

// POI搜索
when 按钮_搜索.Click() {
  global JSON = join("{\"cmd\":\"search\",\"keyword\":\"", TextBox1.Text, "\"}")
  WebViewer1.WebViewString = JSON
}

方案二：使用内置Map组件

本平台内置Map组件可以直接显示高德底图；若只需要选点、标记与定位，先使用内置组件。

when Screen1.Initialize() {
  Map1.CenterFromString("39.90923, 116.397428")
  Map1.ZoomLevel = 14
}

// 添加标记
when 按钮_标记.Click() {
  global myMarker = Map1.CreateMarker(39.90923, 116.397428)
  myMarker.Title = "天安门"
  myMarker.Description = "北京市东城区"
}

常见问题

Q1: 高德地图白屏？

• 检查API Key是否正确
• 确认Key类型是”Web端(JS API)”
• 检查网络连接

Q2: 定位不准？

先分清“没有新定位”和“坐标偏移”：等待 LocationChanged，检查 HasLongitudeLatitude、Accuracy 和定位权限；Accuracy 以米为单位，数值越大，误差范围越大。模拟器里的坐标不能证明手机定位准确。

本平台定位传感器默认输出GCJ02，地图默认也使用GCJ02。直接连接两者时不要再做一次GPS到高德坐标转换。接入原始GPS/WGS84数据时，明确设置地图和定位传感器的坐标体系；高德JS API接收经度在前、纬度在后的坐标，App Inventor的 LocationChanged 参数则是纬度在前。

室外等待新的GPS结果，并比较多次定位与报告精度。不要仅设置 ProviderName 就认定已锁定GPS或提高精度；如果确需锁定，还应核对 ProviderLocked 和设备可用提供者。本文尚未完成手机定位与公交、自行车导航实测。

Q3: 路线规划不显示？

• 确认起终点坐标正确（经度在前，纬度在后）
• 检查是否加载了Driving插件

总结