Vue で Baidu Map を呼び出して経度と緯度を取得する

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があります。vue を使用し、マップは Baidu Maps を使用します。

VueはBaidu Mapを呼び出して現在の経度と緯度を取得し、jsは現在の経度と緯度を取得します。

デフォルトでは、現在の場所の緯度と経度が自動的に取得されます。

経度と緯度を取得するjs

小さな赤いマークをドラッグすると経度と緯度が表示されます

jsは経度と緯度を取得します jsは現在の経度と緯度を取得します

経度と緯度を取得するためのキーワードクエリ

事前準備

まず、Baidu の公式サイトからマップ API キーを申請する必要があります。https://lbsyun.baidu.com/apiconsole/key にアクセスし、アプリケーション管理、マイ アプリケーションで申請します。

適用後、vueプロジェクトのpublicファイルの下のindex.htmlファイルを開き、Baidu AK値をスプライスして導入します。

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

上図のように、赤い部分が AK 値です。独自に組み立てて、権限をパブリックまたは URL ホワイトリストに設定できます。

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

私は elementui のポップアップ ウィンドウ、入力ボックス、プロンプトを使用しました。elementui を使用していない場合は、変更することを忘れないでください。

HTMLコード

<テンプレート>
  <div>
    <el-ダイアログ
      @close="ダイアログをクリア"
      :クリック時に閉じるモーダル="false"
      :title="テキスト"
      スタイル="テキスト配置: 左"
      :visible.sync="ポップアップ"
      幅="30%"
    >
      <div class="フォームレイヤー">
        <el-form ラベル幅="100px" サイズ="mini">
          <el-form-item label="場所を取得">
            <el-button type="primary" @click="fixedPos">位置変更</el-button>
          </el-form-item>
          <el-form-item label="現在の緯度">
            <p>{{緯度}}</p>
          </el-form-item>
          <el-form-item label="現在の経度">
            <p>{{経度}}</p>
          </el-form-item>
          <el-form-item>
            <div class="fac">
              <el-input v-model="keyWords" placeholder="地域を入力してください" style="width: 230px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="setPlace" :disabled="!keyWords">クエリ</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div id="マップ"></div>
      </div>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-ボタン
          サイズ="小"
          タイプ="プライマリ"
          v-if="type != '2'"
          @click="btnSubmit()"
          >確認</el-button
        >
        <el-button size="small" @click="popup = false">キャンセル</el-button>
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>

JSコード

<スクリプト>
  エクスポートデフォルト{
    名前: "mapView",
    データ() {
      戻る {
        マップ: null、
        ローカル: null、
        mk: ヌル、
        緯度: ''、
        経度: ''、
        キーワード: ''
      };
    },
    メソッド: {
      // ポップアップウィンドウを開きます。name はポップアップウィンドウの名前です。async openDialog(name) {
        this.text = 名前;
        this.popup = true;
        このメソッドは、次のとおりです。
      },
      // 確認 btnSubmit() {
        キーを = {
          緯度: this.latitude,
          経度: this.longitude
        }
        // 経度と緯度を出力します console.log(key);
        this.popup = false;
      },
      initMap() {
        this.$nextTick(() => {
          this.map = 新しい BMap.Map("map");
          ポイントを新しいBMap.Point(116.404, 39.915)とします。
          this.map.centerAndZoom(ポイント、12);
          this.map.enableScrollWheelZoom(true); // マウスホイールズームを有効にする this.map.addControl(new BMap.NavigationControl());
          this.fixedPos();
        });
      },
      // クリックして位置を特定 - 現在の位置を特定 fixedPos() {
        _this は定数です。
        const geolocation = 新しい BMap.Geolocation();
        this.confirmLoading = true;
        geolocation.getCurrentPosition(関数(r) {
          (this.getStatus() == BMAP_STATUS_SUCCESS) の場合 {
            _this.handleMarker(_this, r.point);
            myGeo を新しい BMap.Geocoder() にします。
            myGeo.getLocation()
              新しい BMap.Point(r.point.lng, r.point.lat)、
              関数 (結果) {
                _this.confirmLoading = false;
                if (結果) {
                  _this.latitude = result.point.lat;
                  _this.longitude = result.point.lng;
                }
              }
            );
          } それ以外 {
            _this.$message.error("失敗" + this.getStatus());
          }
        });
      },
      // アドレスを検索する setPlace() {
        this.local = 新しい BMap.LocalSearch(this.map, {
          onSearchComplete: this.searchPlace、
        });
        this.local.search(this.keyWords);
      },
      検索場所() {
        if (this.local.getResults() != 未定義) {
          this.map.clearOverlays(); //マップ上のすべてのオーバーレイをクリアするif (this.local.getResults().getPoi(0)) {
            let point = this.local.getResults().getPoi(0).point; //最初のスマート検索結果を取得します this.map.centerAndZoom(point, 18);
            this.handleMarker(this、ポイント);
            console.log("経度: " + point.lng + "--" + "緯度" + point.lat);
            緯度は point.lat です。
            this.longitude = point.lng;
          } それ以外 {
            this.$message.error("一致する場所がありません!");
          }
        } それ以外 {
          this.$message.error("検索結果が見つかりません!");
        }
      },
      // マークを設定する handleMarker(obj, point) {
        that = this とする;
        obj.mk = 新しい BMap.Marker(ポイント);
        obj.map.addOverlay(obj.mk);
        obj.mk.enableDragging(); // ドラッグ可能 obj.mk.addEventListener("dragend", function (e) {
          // 注釈のドラッグをリッスンし、ドラッグ後の経度と緯度を取得します。 that.latitude = e.point.lat;
          that.longitude = e.point.lng;
        });
        ポイントをパンします。
      },
    }
  };
</スクリプト>

CSSコード

<スタイルスコープ>
  .フォームレイヤー{
    幅: 100%;
  }
  #マップ{
    上マージン: 30px;
    幅: 100%;
    高さ: 300px;
    境界線: 1px の灰色
    ボックスのサイズ: 境界線ボックス;
    オーバーフロー: 非表示;
  }
  /deep/ .el-ダイアログ {
    最小幅: 550px;
  }
  /deep/ .el-dialog__body {
    パディング: 10px;
  }
</スタイル>

完全なコード

<テンプレート>
  <div>
    <el-ダイアログ
      @close="ダイアログをクリア"
      :クリック時に閉じるモーダル="false"
      :title="テキスト"
      スタイル="テキスト配置: 左"
      :visible.sync="ポップアップ"
      幅="30%"
    >
      <div class="フォームレイヤー">
        <el-form ラベル幅="100px" サイズ="mini">
          <el-form-item label="場所を取得">
            <el-button type="primary" @click="fixedPos">位置変更</el-button>
          </el-form-item>
          <el-form-item label="現在の緯度">
            <p>{{緯度}}</p>
          </el-form-item>
          <el-form-item label="現在の経度">
            <p>{{経度}}</p>
          </el-form-item>
          <el-form-item>
            <div class="fac">
              <el-input v-model="keyWords" placeholder="地域を入力してください" style="width: 230px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="setPlace" :disabled="!keyWords">クエリ</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div id="マップ"></div>
      </div>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-ボタン
          サイズ="小"
          タイプ="プライマリ"
          v-if="type != '2'"
          @click="btnSubmit()"
          >確認</el-button
        >
        <el-button size="small" @click="popup = false">キャンセル</el-button>
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: "mapView",
    データ() {
      戻る {
        マップ: null、
        ローカル: null、
        mk: ヌル、
        緯度: ''、
        経度: ''、
        キーワード: ''
      };
    },
    メソッド: {
      // ポップアップウィンドウを開きます。name はポップアップウィンドウの名前です。async openDialog(name) {
        this.text = 名前;
        this.popup = true;
        このメソッドは、次のとおりです。
      },
      // 確認 btnSubmit() {
        キーを = {
          緯度: this.latitude,
          経度: this.longitude
        }
        // 経度と緯度を出力します console.log(key);
        this.popup = false;
      },
      initMap() {
        this.$nextTick(() => {
          this.map = 新しい BMap.Map("map");
          ポイントを新しいBMap.Point(116.404, 39.915)とします。
          this.map.centerAndZoom(ポイント、12);
          this.map.enableScrollWheelZoom(true); // マウスホイールズームを有効にする this.map.addControl(new BMap.NavigationControl());
          this.fixedPos();
        });
      },
      // クリックして位置を特定 - 現在の位置を特定 fixedPos() {
        _this は定数です。
        const geolocation = 新しい BMap.Geolocation();
        this.confirmLoading = true;
        geolocation.getCurrentPosition(関数(r) {
          (this.getStatus() == BMAP_STATUS_SUCCESS) の場合 {
            _this.handleMarker(_this, r.point);
            myGeo を新しい BMap.Geocoder() にします。
            myGeo.getLocation()
              新しい BMap.Point(r.point.lng, r.point.lat)、
              関数 (結果) {
                _this.confirmLoading = false;
                if (結果) {
                  _this.latitude = result.point.lat;
                  _this.longitude = result.point.lng;
                }
              }
            );
          } それ以外 {
            _this.$message.error("失敗" + this.getStatus());
          }
        });
      },
      // アドレスを検索する setPlace() {
        this.local = 新しい BMap.LocalSearch(this.map, {
          onSearchComplete: this.searchPlace、
        });
        this.local.search(this.keyWords);
      },
      検索場所() {
        if (this.local.getResults() != 未定義) {
          this.map.clearOverlays(); //マップ上のすべてのオーバーレイをクリアするif (this.local.getResults().getPoi(0)) {
            let point = this.local.getResults().getPoi(0).point; //最初のスマート検索結果を取得します this.map.centerAndZoom(point, 18);
            this.handleMarker(this、ポイント);
            console.log("経度: " + point.lng + "--" + "緯度" + point.lat);
            緯度は point.lat です。
            this.longitude = point.lng;
          } それ以外 {
            this.$message.error("一致する場所がありません!");
          }
        } それ以外 {
          this.$message.error("検索結果が見つかりません!");
        }
      },
      // マークを設定する handleMarker(obj, point) {
        that = this とする;
        obj.mk = 新しい BMap.Marker(ポイント);
        obj.map.addOverlay(obj.mk);
        obj.mk.enableDragging(); // ドラッグ可能 obj.mk.addEventListener("dragend", function (e) {
          // 注釈のドラッグをリッスンし、ドラッグ後の経度と緯度を取得します。 that.latitude = e.point.lat;
          that.longitude = e.point.lng;
        });
        ポイントをパンします。
      },
    }
  };
</スクリプト>
<スタイルスコープ>
  .フォームレイヤー{
    幅: 100%;
  }
  #マップ{
    上マージン: 30px;
    幅: 100%;
    高さ: 300px;
    境界線: 1px の灰色
    ボックスのサイズ: 境界線ボックス;
    オーバーフロー: 非表示;
  }
  /deep/ .el-ダイアログ {
    最小幅: 550px;
  }
  /deep/ .el-dialog__body {
    パディング: 10px;
  }
</スタイル>

これで、Vue で Baidu Maps を呼び出して経度と緯度を取得する方法についての記事は終了です。Vue で Baidu Maps を呼び出して経度と緯度を取得する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • exif を使用して画像の緯度と経度を取得する Vue サンプル コード
  • vueはWeb側で経度と緯度を取得するための位置決め機能を実装します
  • v-model を使用して経度と緯度の入力を実装する elementUI に基づく Vue コンポーネント

<<:  Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

>>:  Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

推薦する

CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

vue3 のコンポーネントの互換性のない変更の詳細な説明

目次機能コンポーネント非同期コンポーネントの書き方とdefineAsyncComponentメソッド...

Reactは複雑な検索フォームの展開と折りたたみ機能を実装します

時間に余裕を持って、過去を忘れましょう。前のセクションでは、[検索] フォームとクエリおよびリセット...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

Dockerコンテナでユーザーを切り替えるときに権限が不足する問題を解決する方法

Docker コンテナでユーザーを切り替えると、権限が不十分であるというメッセージが表示されます。解...

Linuxはsttyを使用して端末の回線設定を表示および変更します。

Sttty は、Linux で端末設定を変更および印刷するための一般的なコマンドです。 1. パラ...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

基本的なウェブページパフォーマンス最適化ルールの簡単な概要

ブラウザのウェブページを最適化するためのいくつかのルールページの最適化静的リソース圧縮ビルド ツール...

Win7 64 ビット版に MySQL 5.7 をダウンロードしてインストールする際によくある問題の概要

1. 公式ウェブサイトからMySQLをダウンロードします。 これが私たちが探しているものです、win...

計算プロパティとリスナーの詳細

目次1. 計算されたプロパティ1.1 基本的な例1.2 計算プロパティキャッシュとメソッド1.3 計...

Vueデータ割り当て問題の解決

私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...