序章
Googleマップには、地図の作成と操作、位置データの視覚化、オートコンプリートによる検索など、堅牢なAPIセットが用意されています。
vue-google-maps は、Vue.js 2用に更新されており、Vue.jsアプリケーションにこれらのAPIを利用するためのツールを提供します。 これには、Googleマップと対話するための充実したコンポーネントのセットと、双方向のデータバインディングが付属しています。
このチュートリアルでは、 vue2-google-maps
ライブラリを作成し、オートコンプリートを使用して場所を表示するマップを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。
- Google MapsJavasScriptAPIキー。
- これにはGoogleアカウントが必要です。
- GoogleCloudPlatformコンソールにログインします。
- 新しいプロジェクトを作成します。
- プロジェクトでGoogleMapsJavaScriptAPIとPlacesAPIを有効にします。
- そして、APIキーのクレデンシャルを作成します。
警告: 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プロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @vue/cli create --default vue-google-maps-example
これは、Vue.jsプロジェクトを作成するためのデフォルト構成を使用します。
新しく作成されたプロジェクトディレクトリに移動します。
- cd vue-google-maps-example
プロジェクトを開始して、エラーがないことを確認します。
- 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
:
- npm install vue2-google-maps@0.10.7
開ける src/main.js
コードエディタで。
輸入 vue2-google-maps
APIキーを使用してプラグインをインスタンス化します。
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
:
<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
</div>
</template>
<script>
export default {
name: 'GoogleMap'
}
</script>
次に、コードエディタで変更します 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
:
<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マップが表示されます。
次に、地理位置を追加してユーザーの現在位置を取得し、それに応じて地図を更新します。
<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
情報。
次に、オートコンプリートを追加して、ユーザーが地図上の場所を変更できるようにします。
<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.log
に setPlace
の値を検査するには place
変数。
次に、地図上の場所を示すマーカーを追加します。
<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>
ここで達成したことを確認しましょう。
作成しました GmapAutocomplete
と GmapMap
(子供たちと GmapMarker
s)。 最初に、マップはモントリオールを中心に作成されます。 インスタンスの後は mounted()
、 あなたが呼ぶ geolocate
中心を再設定します。
ユーザーが検索語を入力し、オートコンプリートドロップダウンから選択すると、 GmapAutocomplete
呼び出し setPlace
. この選択はその後に保存されます currentPlace
. 追加ボタンをクリックすると、 addPlace
マーカーの位置をに格納します markers
、トリガー GmapMap
(そしてその後 GmapMarker
s)更新します。 あなたも更新しています center
最後のマーカーの位置に。
さらに、あなたは各場所の満杯を保存しています place
のオブジェクト places
財産。 これにより、オートコンプリートクエリから返された追加データを、必要に応じてこのコンポーネントまたは子コンポーネントで使用できるようになります。
そして、「アプリ」は次のようになります(アイスランドにいた場合)。
警告:実験が終了したら、誤用の可能性を避けるために、Google Cloud ConsoleにログインしてAPIキーを削除し、関連する請求先アカウントを削除することをお勧めします。
これで、オートコンプリートとマーカー機能を備えたGoogleマップができました。
結論
このチュートリアルでは、使用方法を学びました vue2-google-maps
Vue.jsアプリケーションのGoogleMapsAPI機能。
これは、訪問者にビジネスの場所、旅行先、および興味のあるポイントを表示する大きな可能性を秘めています。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。