跳到教程内容
教程首页
App Inventor 2 教程 猫咪地图
准备开始
动手创造 · PROJECT LAB

猫咪地图

准备探索你的新作品
0%
★★ 项目难度每一步,都离作品更近

先了解你将做出什么

应用介绍

用地图标记你遇到猫的位置。每个圆点都保存一个简短描述,点击圆点时在面板上显示对应图片和说明。

教程主图

猫咪地图教程(难度系数:★★)

搭好地图界面

组件类型 组件名称 关键设置
地图 地图1 显示猫咪位置
图像 图像1 显示选中猫咪
标签 标签1 显示地点描述
圆1圆2圆3 填写纬度、经度和描述

点击圆点显示信息

when 圆1.Click() {
  图像1.Picture = "cat1.jpg"
  标签1.Text = 圆1.Description
}

when 圆2.Click() {
  图像1.Picture = "cat2.jpg"
  标签1.Text = 圆2.Description
}

when 圆3.Click() {
  图像1.Picture = "cat3.jpg"
  标签1.Text = 圆3.Description
}

圆 的 Description 是它自己带的文字属性,这样每个点的说明就不必再额外建立列表。

设置地图中心和缩放

把地图中心设在三个圆点所在的城市,并调整缩放级别,使它们同时出现在视野中。若圆点不显示,先检查纬度、经度和地图中心格式,再检查网络权限。

测试和注意

在真机上点三个圆点,检查图片和文字是否成对出现。如果圆点不在视野里,先检查 地图1 的中心坐标和缩放级别;如果图片不显示,检查文件名和大小写。