跳到教程内容
教程首页
App Inventor 2 教程 地图标记
准备开始

先了解你将做出什么

应用介绍

这次不调用外部地图接口,先用内置 地图、标记 和 标签 做一张离线打卡地图。你可以在地图上预置几个地点,也可以点击任意位置添加临时标记,适合记录校园、展览或旅行路线。

教程主图

地图标记教程(难度系数:★★☆)

1. 设计界面

组件类型 组件名称 关键设置
地图 地图1 缩放级别:15
标记 标记_家 填写标题、描述和坐标
标记 标记_图书馆 填写标题、描述和坐标
标记 标记_食堂 填写标题、描述和坐标
标签 标签_位置 初始文本:点击地图添加临时标记

2. 预置地点并响应点击

先让地图加载后把三个 标记 放在示例坐标。点击地图时,地图 会给出纬度和经度;把坐标交给临时标记,并同步更新提示文字。

when 屏幕1.Initialize() {
  标记_家.SetLocation(31.2304, 121.4737)
  标记_图书馆.SetLocation(31.2312, 121.4745)
  标记_食堂.SetLocation(31.2298, 121.4729)
  标签_位置.Text = "点击地图添加临时标记"
}
when 地图1.TapAtPoint(latitude, longitude) {
  标记_家.SetLocation(latitude, longitude)
  标记_家.Title = "刚刚打卡的位置"
  标记_家.Description = join("纬度 ", latitude, ",经度 ", longitude)
  标签_位置.Text = join("已标记:", latitude, ", ", longitude)
}

3. 让标记更有信息

为每个 标记 设置不同颜色和标题。短按 标记 会显示信息窗,长按则可以把当前地点写进 标签。这样既能看到预置地点,也能确认地图点击是否成功。

when 标记_家.Click() {
  标签_位置.Text = join("家庭点:", 标记_家.Description)
}
when 标记_图书馆.Click() {
  标签_位置.Text = join("图书馆:", 标记_图书馆.Description)
}
when 标记_食堂.Click() {
  标签_位置.Text = join("食堂:", 标记_食堂.Description)
}

4. 测试清单

先确认地图能拖动和缩放,再依次点击三个地点,最后点击一处空白地图。若临时标记看不见,检查 标记 的 Visible 是否为真,以及地图的缩放级别是否过小。完成后可以把示例坐标换成你熟悉的地点。