プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があります。vue を使用し、マップは Baidu Maps を使用します。 デフォルトでは、現在の場所の緯度と経度が自動的に取得されます。 小さな赤いマークをドラッグすると経度と緯度が表示されます 経度と緯度を取得するためのキーワードクエリ 事前準備まず、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用
>>: Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明
目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...
背景mysql.slow_log からスロー クエリ ログを取得するのは遅く、テーブルは csv テ...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...
結果:実装コード: html <link href='https://fonts.go...
1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...
大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...
目次導入ステップ1ステップ2: アイデアで動的Webプロジェクトを作成するステップ3: Tomcat...
現実世界では、鍵は外の世界から身を隠したいときに使用するツールです。コンピュータでは、複数のプロセス...
この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...
目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...