開発者ドキュメント

vue-google-mapsを使用してVueでGoogleマップを使用する方法

序章

Googleマップには、地図の作成と操作、位置データの視覚化、オートコンプリートによる検索など、堅牢なAPIセットが用意されています。

vue-google-maps は、Vue.js 2用に更新されており、Vue.jsアプリケーションにこれらのAPIを利用するためのツールを提供します。 これには、Googleマップと対話するための充実したコンポーネントのセットと、双方向のデータバインディングが付属しています。

このチュートリアルでは、 vue2-google-maps ライブラリを作成し、オートコンプリートを使用して場所を表示するマップを作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

警告: Google Maps APIを使用するときに「開発目的のみ」のメッセージを回避するには、有効なクレジットカードを提供し、GoogleCloudProjectの請求先アカウントに関連付ける必要があります。 これらのAPIの使用に関連する料金に注意してください。

このチュートリアルは、ノードv14.13.1で検証されました。 npm v6.14.8、 vue v2.6.11、および vue2-google-maps v0.10.7。

ステップ1—プロジェクトの設定

@ vue / cli を使用して、新しいVue.jsプロジェクトを作成できます。

ターミナルウィンドウで、次のコマンドを使用します。

  1. npx @vue/cli create --default vue-google-maps-example

これは、Vue.jsプロジェクトを作成するためのデフォルト構成を使用します。

新しく作成されたプロジェクトディレクトリに移動します。

  1. cd vue-google-maps-example

プロジェクトを開始して、エラーがないことを確認します。

  1. npm run serve

ローカルアプリにアクセスした場合(通常は localhost:8080)Webブラウザに、 "Welcome to Your Vue.js App" メッセージ。

この足場を設置すると、 vue2-google-maps パッケージ。

ステップ2—実装 vue2-google-maps

次に、をインストールします vue2-google-maps パッケージ化して、Vue.jsプロジェクトに追加します。

まず、インストールする必要があります vue2-google-maps:

  1. npm install vue2-google-maps@0.10.7

開ける src/main.js コードエディタで。

輸入 vue2-google-maps APIキーを使用してプラグインをインスタンス化します。

src / main.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE',
    libraries: 'places',
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app')

必ず交換してください 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE' 実際のAPIキーを使用します。 また、 places オートコンプリート機能を使用するために必要なライブラリ。

警告: APIキーは、意図しない目的で他のユーザーが使用できるため、パブリックリポジトリ(GitHubなど)にコミットするファイルには保存しないでください。

アプリケーションを使用する準備ができたら vue2-google-maps、それを使用するカスタムコンポーネントを作成できます。

ステップ3—マップ検索コンポーネントの構築

次に、を使用する新しいコンポーネントを作成します GmapMap, GmapAutocomplete、 と GmapMarker.

コードエディタで、という新しいコンポーネントを作成します GoogleMap.vue:

src / components / GoogleMap.vue
<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
    </div>
    <br>
  </div>
</template>

<script>
export default {
  name: 'GoogleMap'
}
</script>

次に、コードエディタで変更します App.vue この新しいコンポーネントを使用するには:

src / App.vue
<template>
  <div id="app">
    <GoogleMap />
  </div>
</template>

<script>
import GoogleMap from './components/GoogleMap.vue'

export default {
  name: 'App',
  components: {
    GoogleMap
  }
}
</script>

Webブラウザでアプリケーションにアクセスするときは、次のことを確認する必要があります。 "Search and add a pin" メッセージ。 このチェックポイントは、この時点までのすべてが正しく機能していることを確認するのに役立ちます。 次に、マップのすべてのピースの追加を開始します。

チュートリアルの目的で、デフォルトを定義できます center カナダのモントリオールと一致する緯度と経度の座標を持つ場所(45.508, -73.587). これがマップの最初のフォーカスポイントになります。 これらの値は自由に変更してください。

追加します GmapMap 成分。 そして、 center, zoom、 と style:

src / components / GoogleMap.vue
<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
    </div>
    <br>
    <GmapMap
      :center='center'
      :zoom='12'
      style='width:100%;  height: 400px;'
    />
  </div>
</template>

<script>
export default {
  name: 'GoogleMap',
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
    }
  },
};
</script>

この時点で、ブラウザでアプリケーションにアクセスすると、モントリオールを中心としたGoogleマップが表示されます。

次に、地理位置を追加してユーザーの現在位置を取得し、それに応じて地図を更新します。

src / components / GoogleMap.vue
<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
    </div>
    <br>
    <GmapMap
      :center='center'
      :zoom='12'
      style='width:100%;  height: 400px;'
    />
  </div>
</template>

<script>
export default {
  name: 'GoogleMap',
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
    }
  },
  mounted() {
    this.geolocate();
  },
  methods: {
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
      });
    },
  },
};
</script>

この時点で、ブラウザでアプリケーションにアクセスすると、現在地の中央にGoogleマップが表示されます。

注:ブラウザでの使用を許可するには、プロンプトを受け入れる必要がある場合があります geolocation 情報。

次に、オートコンプリートを追加して、ユーザーが地図上の場所を変更できるようにします。

src / components / GoogleMap.vue
<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
      <GmapAutocomplete
        @place_changed='setPlace'
      />
    </div>
    <br>
    <GmapMap
      :center='center'
      :zoom='12'
      style='width:100%;  height: 400px;'
    />
  </div>
</template>

<script>
export default {
  name: 'GoogleMap',
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
      currentPlace: null,
    }
  },
  mounted() {
    this.geolocate();
  },
  methods: {
    setPlace(place) {
      this.currentPlace = place;
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
      });
    },
  },
};
</script>

このコードは GmapAutocomplete 成分。 更新すると place, setPlace と呼ばれ、 currentPlace 値が更新されます。

この時点で、ブラウザでアプリケーションにアクセスすると、フィールドに入力された内容に基づいて場所の候補を提供するオートコンプリートフィールドが表示されます。 気になる場合は、 console.logsetPlace の値を検査するには place 変数。

次に、地図上の場所を示すマーカーを追加します。

src / components / GoogleMap.vue
<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
      <GmapAutocomplete
        @place_changed='setPlace'
      />
      <button
        @click='addMarker'
      >
        Add
      </button>
    </div>
    <br>
    <GmapMap
      :center='center'
      :zoom='12'
      style='width:100%;  height: 400px;'
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: 'GoogleMap',
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
      currentPlace: null,
      markers: [],
      places: [],
    }
  },
  mounted() {
    this.geolocate();
  },
  methods: {
    setPlace(place) {
      this.currentPlace = place;
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
      });
    },
  },
};
</script>

ここで達成したことを確認しましょう。

作成しました GmapAutocompleteGmapMap (子供たちと GmapMarkers)。 最初に、マップはモントリオールを中心に作成されます。 インスタンスの後は mounted()、 あなたが呼ぶ geolocate 中心を再設定します。

ユーザーが検索語を入力し、オートコンプリートドロップダウンから選択すると、 GmapAutocomplete 呼び出し setPlace. この選択はその後に保存されます currentPlace. 追加ボタンをクリックすると、 addPlace マーカーの位置をに格納します markers、トリガー GmapMap (そしてその後 GmapMarkers)更新します。 あなたも更新しています center 最後のマーカーの位置に。

さらに、あなたは各場所の満杯を保存しています place のオブジェクト places 財産。 これにより、オートコンプリートクエリから返された追加データを、必要に応じてこのコンポーネントまたは子コンポーネントで使用できるようになります。

そして、「アプリ」は次のようになります(アイスランドにいた場合)。

警告:実験が終了したら、誤用の可能性を避けるために、Google Cloud ConsoleにログインしてAPIキーを削除し、関連する請求先アカウントを削除することをお勧めします。

これで、オートコンプリートとマーカー機能を備えたGoogleマップができました。

結論

このチュートリアルでは、使用方法を学びました vue2-google-maps Vue.jsアプリケーションのGoogleMapsAPI機能。

これは、訪問者にビジネスの場所、旅行先、および興味のあるポイントを表示する大きな可能性を秘めています。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了