0

Googleマップを表示するために使用したリンクは次のとおりです。

https://jsfiddle.net/oscar11/1krtvcfj/2/

このコードを試してマップにアクセスしようとすると、次のエラーが表示されます。

マウントされたフックのエラー:「ReferenceError: google is not defined」

誰かが別のリンクで提案したように、次のような4つのパラメーターを初期化しました

geocoder: null,
map: null,
marker: null,
infowindow: null

このコードを使用して Google マップにアクセスする必要があります。誰か助けてください。

4

1 に答える 1

0

ここで多くのことが間違っています：

  • 変数への参照は、データ コンポーネントで維持する必要があります。
  • 関数コールバックは、.bind(this)スコープを維持するために、太い矢印関数を使用するか、(他のオプションの中でも) 使用する必要があります。これは に変わりfunction () {ます() => {。それ以外の場合、これらの匿名コールバック内のスコープはthisVue インスタンスではありません。
  • マップ自体は Vue テンプレートの一部である必要があります。
  • address入力はv-model、コンポーネントとのデータの同期を維持するために、Vue が提供するバインディングを使用する必要があります。
  • geocoderAPI キーがないとサービスは動作しません。
  • マップを正しく表示するには、コンポーネントのベースdivにも固定の高さ、または少なくとも の高さが必要です。100%
  • を使用できますが、要素への参照を維持するには、要素に追加してから代わりにdocument.getElementById()使用することをお勧めします。refref="map_canvas"this.$refs.map_canvas

いくつかのコードをコピーして Vue コンポーネントに貼り付け、それが機能することを願っているようです。それはしません。私はあなたのためにこれをきれいにしましたが、これらがどのように統合されるかについて理解できるように、違いに細心の注意を払うことをお勧めします.

これが更新されたjsFiddleです

于 2019-05-16T14:41:50.790 に答える