Vue プロジェクトで Baidu Map API を使用する方法

Vue プロジェクトで Baidu Map API を使用する方法

1. Baidu Map Open Platformにアカウントを登録してログインする

ウェブサイト: http://lbsyun.baidu.com/index.php?title=jspopularGL

2. 必要なマップのバージョンを選択します。

個人的には、2.0 で十分です。実際、私は怠け者なので、3.0 を見ずに常に 2.0 を使ってきました。しかし、3.0 も同様に使用する必要があります。

3. それを vue プロジェクトの public フォルダの index.html にインポートし、ak を置き換えることを忘れないでください (この ak は他の ak と同じではありません)

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

4. その後は、Baidu Maps をどこでも使用できるようになります。

必要なページ コンポーネントにマップ コンテナーを追加します。

<div id="map" class="map"></div>

ここでのクラスは、サイズやレイアウトなどのスタイル操作を定義するために使用されます。重要なのは、ID 値マップです。

通常、コンポーネントが読み込まれるとき、つまりページがレンダリングされるときにマップを読み込むので、マウントされた段階でコア コードを追加できます。

// Baidu Map API 関数 var map = new BMap.Map("map"); // Map インスタンスを作成 map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // マップを初期化し、中心点の座標とマップ レベルを設定 // マップ タイプ コントロールを追加 map.addControl(
   新しい BMap.MapTypeControl({
     マップタイプ: [BMAP_NORMAL_MAP、BMAP_HYBRID_MAP]、
   })
);
map.setCurrentCity("Chengdu"); //地図上に表示される都市を設定します。この項目は set.map.enableScrollWheelZoom(true); にする必要があります。

これにより、ページに Baidu マップが表示されます。CSS で幅と高さを追加することを忘れないでください。 !

5. マーカー ポイントを追加し、クリックするとポップアップ ウィンドウ効果が表示されます。

ポイントを新しいBMap.Point(104.07258, 30.550501)とします。
// ポイントマーカーを作成します。var marker = new BMap.Marker(point);
// マップにポイントマーカーを追加します。map.addOverlay(marker);
// 情報ウィンドウを作成する var opts = {
  幅: 200,
  高さ: 100,
  title: "ポップアップタイトル",
};
var infoWindow = 新しい BMap.InfoWindow(
  「ポップアップコンテンツ」、
  オプション
);
// マーカーにクリックイベントを追加する marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // 情報ウィンドウを開きます });

6. 座標点にテキストマークを追加します。

//テキストマークを設定する var opts2 = {
  position: point, // テキスト注釈の地理的位置を指定します offset: new BMap.Size(30, -30), // テキストのオフセットを設定します };
// テキスト注釈オブジェクトを作成します。 var label = new BMap.Label("Chengdu Shulun Technology Co., Ltd.", opts2);
// カスタムテキスト注釈スタイル label.setStyle({
  色:「青」、
  境界半径: "5px",
  境界線の色: "#ccc",
  パディング: "10px",
  フォントサイズ: "16px",
  高さ: "50px",
  行の高さ: "30px",
  フォントファミリー: "Microsoft YaHei",
});
map.addOverlay(ラベル);

上記は、Vue プロジェクトで Baidu Map API を使用する方法の詳細です。Vue プロジェクトで Baidu Map API を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • VueプロジェクトでBaidu Map APIを呼び出す方法の詳細な説明
  • vue.js の vue-cli スキャフォールディングで Baidu Map API を使用する例
  • vue.js で Baidu Map jsApi を導入する 2 つの方法を詳しく説明
  • vueプロジェクトはBaidu Map APIへの便利なアクセスを実現します

<<:  MySQL が外部キーを作成できない理由と解決策

>>:  ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法

推薦する

iostat を使用して Linux ハードディスクの IO パフォーマンスを表示する方法

TOP 観察: IO 待機に占められる CPU 時間の割合。30% を超えると、IO の負荷が高くな...

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

Linux C ログ出力コード テンプレート サンプル コード

序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...

Vueカスタムツリーコントロールの使い方の詳細な説明

この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...

Linux で Tomcat を実行するいくつかの方法の説明

Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

ウェブページ内のFlash SWFファイルを変更する方法

これは多くの人が遭遇した問題だと思います。実際、Web ページから FLASH をダウンロードして修...

CentOS8 ネットワークカード設定ファイル

1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...

CSS3アニメーション属性に基づくWeChatタップアニメーション効果の実装

最近人気のWeChatタップ機能を見て、CSS3アニメーションを見直し、このボックスシェイクアニメー...

nginx リバース プロキシの魔法のスラッシュについての簡単な説明

nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...

JS+Canvas が抽選ホイールを引く

この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

CentOS 6 および 7 での MySQL 5.7 の詳細なインストール チュートリアル

開発には常にデータが必要です。サーバーとしての Linux では、テスト データを格納するためのデー...

Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...