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

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

VueはBaidu Mapを呼び出して現在の経度と緯度を取得し、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 をよろしくお願いいたします。

以下もご興味があるかもしれません: