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 が外部キーを作成できない理由と解決策

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

推薦する

CentOS7.6 システムで yum を使用して lnmp 環境を構成する方法

1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...

MySQL インデックスの左端原則のサンプルコード

序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...

異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...

Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました

運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...

Navicat for MySQL チュートリアル

まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

コマンドラインを使用してUbuntuのバージョンを検出する方法

方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...

CSS カウンターとコンテンツの概要

コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

React Nativeはモニタリングジェスチャーの上下プル効果を実現します

React Native は、プルアップとプルダウンの監視ジェスチャを実装します。詳細なコアコードは...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...