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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法
TOP 観察: IO 待機に占められる CPU 時間の割合。30% を超えると、IO の負荷が高くな...
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...
Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
これは多くの人が遭遇した問題だと思います。実際、Web ページから FLASH をダウンロードして修...
1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...
最近人気のWeChatタップ機能を見て、CSS3アニメーションを見直し、このボックスシェイクアニメー...
nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...
この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...
目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...
開発には常にデータが必要です。サーバーとしての Linux では、テスト データを格納するためのデー...
ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...