AVESを介してSvelteロケーション検索

これまでにsvelteアプリの関心のポイントを検索することができますか?Webアプリにマップを追加することについての私の上に構築する、それは比較的簡単にユーザーがアドレスや興味のポイントを検索し、結果を可視化することができます.実際には、この機能を有効にするには、既存のSvelteコンポーネントに2行以上のコードを追加する必要があります.

Are you building mapping or location services web apps? DM me on - Would love to chat to understand your needs and experiences.

(1)amplifymap svelteコンポーネント
知っておくべきことは、場所の検索がより正式にジオコーディングと呼ばれることです.それで、我々は前に編集することができますAmplifyMap.svelte つの新しい行を追加するファイル

const geocoder = AmplifyMapLibre.createAmplifyGeocoder()
map.addControl(geocoder)

この更新されたファイルの結果:

<script>
  import { onMount } from "svelte"

  export let width = "800px"
  export let height = "600px"

  async function initializeMap() {
    const map = await AmplifyMapLibre.createMap({
      container: "map", // DOM element to hold map.
      center: [-123.1187, 49.2819],
      zoom: 11,
      region: "us-west-2",
    })

    const geocoder = AmplifyMapLibre.createAmplifyGeocoder()
    map.addControl(geocoder)
  }

  onMount(() => {
    initializeMap()
  })
</script>

<div id="map" style="width: {width}; height: {height};" />

我々がこのアプローチをするならば、検索ボックスは地図自体に加えられます、そして、結果は地図の上に重ねられるリストとして示されます.また、あなたのアプリケーションの他の場所で検索コンポーネントを持つことができますdocs here .

2 .検索リソースを追加する
これが適切に働く前に、私たちはLocation Search を指定します.これは、以前のポストでマップリソースを追加する方法と非常に似ています.

IMPORTANT NOTE Because the Geo functionality is under Developer Preview, you need to make sure you have the @geo branch of the CLI installed, as described in the Geo Getting Started guide. We'll remove this requirement when Geo is generally available.

最新のものを確認してください@geo 分岐は、次のコマンドを使用してインストールされているCLIを増幅します.(書き込み時に最新バージョンは5.2.2-geo.2 ).

npm -g i @aws-amplify/cli@geo

そして、我々はLocation Search 以下のコマンドを使用するバックエンドリソース

$> amplify add geo

? Select which capability you want to add:
  Map (visualize the geospatial data)
❯ Location search (search by places, addresses, coordinates)

? Provide a name for the location search index (place index):  
<use the default ID or provide your own>

? Who can access this Search Index?
  Authorized users only
❯ Authorized and Guest users

? Do you want to configure advanced settings? (y/N)

The place index 文字列はスーパークリティカルではありませんが、デフォルトではIDを指定するか、独自の意味のある名前を選ぶのは安全です.
最後に、AWSで変更されたことを確認するために、次のコマンドを使って増幅してください.

amplify push

3 .まあ!
うまくいけば、あなたは今、ユーザーが場所を検索し、地図上の場所を表示できるようになるWebアプリを持っている!
あなたは私たちのこの経験を拡張し、カスタマイズするためにきちんとした方法で多くの情報を得ることができますofficial docs .