JavaScript - vue で Baidu マップを使用すると、解析できないというメッセージが表示される

Question

vue-cli を使用してアプリケーションを構築します

index.html の Baidu Map のスクリプトを引用します。
[<script type="text/javascript" src="http://api.map.baidu.com/api?...My ak "></script>]

次に、app.vue のマウントされた関数で Baidu Map のデモを呼び出します
[

リーリー

]

プロンプト情報は次のとおりですスクリーンショット

そこで、vue-cliを使わずにBaidu Mapのスクリプトを自分のページに直接引用したところ、正しく表示されました

他にこの問題に遭遇した人がいるかどうかはわかりません

Answer 1

https://www.talkingcoder.com/... マップの非同期読み込みを使用する

Answer 2

グローバル参照を webpack.base.conf.js に追加する必要があります

webpackConfig

リーリー

これはグローバルにロードされるため、使用するかどうかに関係なくロードされます。

私たちはグローバルなアプローチから始めましたが、後にユーザーエクスペリエンスを考慮して非同期読み込みを採用しました。

nodejsは洗練されていないので上記の書き方でも大丈夫です

今回はコールバックメソッドを使用しました

リーリー

Baidu js リンクの最後にコールバックがあることがわかります。これはウィンドウの下で関数を呼び出します。その後、関数を登録して直接初期化できます。 リーリー

上記の方法を使用する場合、各ページに 1 つの Baidu マップのみを初期化できます。複数のマップがある場合は、それらをロックする必要があります。

最初のマップを初期化するとき、コンポーネントを非同期でロードする必要があるため、この時点ではロックされています。2 番目と 3 番目のマップは、コールバック関数を登録し、関数名を保存するだけで済みます。 Cookie またはローカル ストレージなどに保存されます。その後、マップがロードされると、最初に登録されたコールバック関数が実行され、最初のコールバック関数はマップを通常どおり初期化できます。同時に、通知はストレージから他の 2 つの関数名を読み取り、それらを呼び出して初期化を完了します。これにより、同じページを同時に複数回初期化できます