十步教你如何在AWS上构建地图应用程序
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
2024年6月27日：这篇博文使用的是Amplify Gen 1，如果您要开始使用新的Amplify应用程序，我建议您尝试使用Gen 2！
上周，我所在的AWS Amplify团队发布了新的地图 UI 组件。我想借此机会展示一下，结合 Amplify Geo 和 Amplify Studio，您可以构建出怎样的应用！
我是一名狂热的徒步旅行者，AllTrails是我最喜欢的网站之一，我在本教程中复制了他们用户界面的一小部分！
1. 创建一个新的 Studio 实例
前往Amplify 控制台并选择创建新应用。
Studio实例部署完成后，点击“启动Studio”。
2. 创建数据模型
进入 Studio 后，点击左侧导航栏“设置”下的“数据”。添加一个模型。添加Hike字段name、difficulty、location、lat、long、和。、和应为浮点数，所有其他字段应为字符串。lengthtimecoverImagelatlonglength
完成数据模型后，点击“保存并部署”！
现在，转到“管理”下的“内容”选项卡，添加一些徒步路线！您可以通过在谷歌上搜索“路线名称 纬度和经度”来找到纬度和经度。
3. 启用身份验证
数据模型部署完成后，请转到“设置”下的“身份验证”。然后部署默认身份验证模式。我们不会实现完整的登录流程（您可以点击此处了解详情），我们只需要启用身份验证即可启用映射功能。
4. 在 Figma 中更改 UI 组件
前往AWS Amplify UI Kit。将 Figma 文件复制到您的账户，然后前往“我的组件”页面。您会看到一个名为“CardB”的卡片，我们将对其进行修改以适应我们的应用程序。
- 通过给卡片和图像的上角添加圆角，使卡片的边角变圆。
- 从页面上复制一个小按钮
Primitives，然后将其粘贴到卡片上。 - 将当前地址更改为三个独立的文本字段，中间的字段为点号。
完成后，你的卡片应该和上面的图片类似。
我还删除了不使用的组件。
5. Figma 到代码
然后返回 Studio，前往“UI 库”页面。点击“开始使用”，粘贴 Figma 文件的链接。然后接受所有组件。
然后，点击CardB“UI库”页面上的组件。接着点击“配置”。在这里，我们将把数据绑定到我们的组件！
点击图片，然后将 设置src为hike.coverImage。然后，点击$99 USD并将 设置为label。hike.name将床位/浴室/平方英尺信息设置为 的名称hike.location。
将按钮标签设置为hike.difficulty。我还希望这个元素是一个 div 而不是按钮——所以我将asprop 设置为 "div"。
我将第一个文本字段设置为连接属性：hike.length+ miles。我将第二个文本字段设置为hike.time。
我的最终卡片看起来是这样的：
我想把我的所有徒步路线都列在一个列表中，所以我要创建一个收藏集。点击右侧的“创建收藏集”按钮。我把我的收藏集命名为Hikes……
根据需要添加右侧边距，我还添加了搜索和分页功能。我保留了数据集的原始格式，但您可以根据需要添加排序或筛选条件。
6. 设置本地代码
现在我们准备将此列表集成到我们的应用程序中！首先，创建一个 React 应用程序：
npx create-react-app amplify-maps
安装 Amplify 库和 React 组件：
npm i aws-amplify @aws-amplify/ui-react
运行 Amplify pull 命令来获取项目。在 Studio 的右上角，你会看到一个“本地设置说明”链接，其中包含一个适用于你应用的专属命令。在命令行中运行此命令。
amplify pull --appId your-app-id --envName staging
然后，在您的文件中配置 Amplify index.js：
// Add needed imports
import { Amplify } from 'aws-amplify'
import config from './aws-exports'
import { AmplifyProvider } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
// Configure Amplify
Amplify.configure(config)
// use the Amplify Provider component to intialize CSS
ReactDOM.render(
<AmplifyProvider>
<App />
</AmplifyProvider>,
document.getElementById('root')
)
现在，打开你的App.js文件并导入该Hikes组件。
import { Hikes } from './ui-components'
请将文件正文替换App.js为以下内容：
function App () {
return (
<div className='container'>
<Hikes />
</div>
)
}
现在，如果你运行 React 服务器，你就能在页面上看到你的徒步路线列表了！
7. 添加地理位置
让我们把地图添加到我们的应用程序中。首先，我们需要初始化Amplify Geo。
amplify add geo从命令行运行。
请用以下材料回答接下来的问题：
? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: (enter for default)
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)
✔ Do you want to configure advanced settings? (y/N) · no
现在，运行程序amplify push以部署您的更改。
8. 在用户界面中添加地图。
现在，我们将使用Amplify Geo UI 组件在页面上添加地图。我将以丹佛的经纬度作为地图中心。您也可以尝试调整初始缩放级别。
import { MapView } from '@aws-amplify/ui-react'
...
function App () {
return (
<div className='container'>
<Hikes />
<MapView
initialViewState={{
latitude: 39.113014,
longitude: -105.358887,
zoom: 7
}}
/>
</div>
)
}
现在，让我们为每条徒步路线在地图上添加标记！我将添加一个useEffect查询，用于查找我所有的徒步路线。
// Add needed imports
import { useEffect, useState } from 'react'
import { Hike } from './models'
import { DataStore } from 'aws-amplify'
...
// at the top of App.js pull all the hikes and store them in state
const [hikes, setHikes] = useState([])
useEffect(() => {
const getHikes = async () => {
const hikes = await DataStore.query(Hike)
setHikes(hikes)
}
getHikes()
}, [])
现在，让我们遍历所有徒步路线，并Marker为每条路线添加一个实例，记录其纬度和经度：
import { Marker } from 'react-map-gl'
...
function App () {
return (
<div className='container'>
<Hikes />
<MapView
initialViewState={{
latitude: 39.113014,
longitude: -105.358887,
zoom: 7
}}
>
{hikes.map(hike => (
<Marker
latitude={hike.lat}
longitude={hike.long}
key={hike.id}
/>))}
</MapView>
</div>
)
}
现在你的地图应该看起来像这样：
9. 添加弹出窗口
现在我们有了一张带有标记的地图，让我们添加点击标记时弹出的窗口，以便您可以查看有关徒步旅行的更多信息！CardB如果弹出窗口打开，我将渲染该组件。
// Import the Popup
import { Marker, Popup } from 'react-map-gl'
...
function MarkerWithPopup ({ hike, latitude, longitude }) {
const [showPopup, setShowPopup] = useState(false)
// event listener that toggles whether the popup is displayed
const handleMarkerClick = ({ originalEvent }) => {
originalEvent.stopPropagation()
setShowPopup(true)
}
// render the marker and the popup, render the CardB again within the popup.
return (
<>
<Marker
latitude={latitude}
longitude={longitude}
onClick={handleMarkerClick}
/>
{showPopup && (
<Popup
latitude={latitude}
longitude={longitude}
offset={{ bottom: [0, -40] }}
onClose={() => setShowPopup(false)}
maxWidth='95%'
closeOnMove
>
<CardB hike={hike} />
</Popup>
)}
</>
)
}
修改应用程序，使其显示标记MarkerWithPopup而不是原始标记！
{
hikes.map(hike => (
<MarkerWithPopup
latitude={hike.lat}
longitude={hike.long}
hike={hike}
key={hike.id}
/>)
)
}
10. 添加样式
我还向文件中添加了以下 CSS 代码index.css，请忽略其中的!importants！它们用于覆盖弹出窗口的现有样式！
@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');
.container {
display: flex;
}
.maplibregl-popup-content, .mapboxgl-popup-content {
background-color: transparent !important;
box-shadow: none !important;
border-radius: none !important;
z-index: 5 !important;
max-width: 95% !important;
}
.maplibregl-popup-close-button, .mapboxgl-popup-close-button {
color: white !important;
font-size: 30px !important;
font-weight: bold;
}
现在，当您点击标记时，您的应用程序应该可以正常弹出窗口了！
结论
在本教程中，我们使用 Amplify Studio、Amplify CLI 和 Amplify UI 组件构建了一个地图界面。如果您想删除本教程中使用的资源，请amplify delete在 CLI 中运行相应的命令。我非常希望听到您在使用 Amplify 进行构建过程中的反馈，尤其是在撰写本文时 Studio 仍处于开发者预览阶段！