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のスクリプトを自分のページに直接引用したところ、正しく表示されました
他にこの問題に遭遇した人がいるかどうかはわかりません
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://www.talkingcoder.com/... マップの非同期読み込みを使用する
グローバル参照を webpack.base.conf.js に追加する必要があります
webpackConfig
リーリーこれはグローバルにロードされるため、使用するかどうかに関係なくロードされます。
私たちはグローバルなアプローチから始めましたが、後にユーザーエクスペリエンスを考慮して非同期読み込みを採用しました。
nodejsは洗練されていないので上記の書き方でも大丈夫です
今回はコールバックメソッドを使用しましたリーリー
Baidu js リンクの最後にコールバックがあることがわかります。これはウィンドウの下で関数を呼び出します。その後、関数を登録して直接初期化できます。 リーリー上記の方法を使用する場合、各ページに 1 つの Baidu マップのみを初期化できます。複数のマップがある場合は、それらをロックする必要があります。
最初のマップを初期化するとき、コンポーネントを非同期でロードする必要があるため、この時点ではロックされています。2 番目と 3 番目のマップは、コールバック関数を登録し、関数名を保存するだけで済みます。 Cookie またはローカル ストレージなどに保存されます。その後、マップがロードされると、最初に登録されたコールバック関数が実行され、最初のコールバック関数はマップを通常どおり初期化できます。同時に、通知はストレージから他の 2 つの関数名を読み取り、それらを呼び出して初期化を完了します。これにより、同じページを同時に複数回初期化できます