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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法
1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...
MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...
序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...
フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...
運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...
1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...
まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...
この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...
方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...
React Native は、プルアップとプルダウンの監視ジェスチャを実装します。詳細なコアコードは...
導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...