用10个步骤在AWS上构建一个地图应用程序（详细教程）

xcvxvxc
220 阅读6分钟

上周，我在AWS Amplify工作的团队推出了新的地图UI组件。我想借此机会展示一下你可以用Amplify Geo和Amplify Studio一起构建的东西

我是一个狂热的徒步旅行者，AllTrails是我最喜欢的网站之一，在这个教程中，我复制了他们的用户界面的非常非常小的一部分

1.创建一个新的工作室实例

前往Amplify控制台，选择建立一个新的应用程序。

一旦你的工作室实例部署完毕，点击 "启动工作室"。

2.创建你的数据模型

一旦你进入了Studio，点击左侧导航中的 "设置 "下的 "数据"。添加一个模型，Hike 。添加字段name,difficulty,location,lat,long,length,time, 和coverImage 。lat,long, 和length 应该是浮动的，所有其他字段应该是字符串。

Image description

一旦你实现了你的数据模型，点击 "保存和部署"!

现在，去 "管理 "下的 "内容 "选项卡，添加一些徒步旅行的内容你可以通过谷歌搜索 "trail name lat and long "来找到经度和纬度。

3.启用授权

一旦你的数据模型部署完毕，进入 "设置 "下的 "认证"。然后部署默认的认证模式。我们不会实现一个完整的登录流程，尽管你可以在这里了解如何实现，我们只需要启用auth来实现映射。

4.在Figma中改变UI组件

前往AWS Amplify UI Kit。复制Figma文件到你的账户，然后前往 "我的组件 "页面。你会看到一个 "CardB "卡，我们将为我们的应用程序进行修改。

  1. 通过给卡片和图片的顶角添加一个边框半径，使卡片的角变圆。
  2. 从Primitives 页面上复制一个小按钮并粘贴到卡片上。
  3. 将目前的地址改成三个独立的文本字段，中间的是一个点字符。

Image description

当你完成后，你的卡片应该看起来和上面类似。

我还删除了我不使用的组件。

5.从Figma到代码

然后，回到Studio中，前往 "UI库 "页面。点击 "开始 "并粘贴到你的Figma文件的链接。然后接受你所有的组件。

然后，点击 "用户界面库 "页面上的CardB 组件。然后点击 "配置"。在这里，我们将把数据绑定到我们的组件上!

点击图片，然后将src 设置为hike.coverImage 。然后，点击$99 USD ，将label 设置为hike.name 。将床位/浴室/平方英尺的信息设置为hike.location 的名称。

将按钮标签设置为hike.difficulty 。我还希望这个元素是一个div，而不是一个按钮--所以我将把as 的道具设置为 "div"。

Image description

我将把它下面的第一个文本字段设置为一个串联的属性。 hike.length +miles 。我将第二个设置为hike.time 。

我的最终卡片看起来是这样的。

Image description

我想在一个列表中显示我所有的徒步旅行，所以我将创建一个集合。点击右边的 "创建一个集合 "按钮。我把我的集合称为Hikes 。

在右边根据需要添加边距，我添加了搜索和分页。我保持了数据集的原样，尽管你可以根据需要添加分类或过滤器。

Image description

6.设置本地代码

现在，我们准备将这个列表整合到我们的应用程序中去！首先，创建一个React应用程序。首先，创建一个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

然后，在你的index.js 文件中配置Amplify。

// 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>
  )
}

现在你的地图应该看起来像这样。

Image description

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.添加样式

我还在我的index.css 文件中添加了以下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;
}

Image description

现在，当你点击一个标记时，你的应用程序应该有工作的弹出窗口了!

总结

在本教程中，我们使用Amplify Studio、Amplify CLI和Amplify UI组件来建立一个地图界面。如果你想删除本教程中使用的资源，请在你的CLI中运行amplify delete 。我很想听到你在使用Amplify构建时的反馈，尤其是在写这篇文章时，Studio仍处于开发者预览阶段

avatar
文章
阅读
粉丝