vue-amap のインストールと使用手順

「vue-amap」からVueAMapをインポートします。
Vue.use(VueAMap);
// vue-amap を初期化する
VueAMap.initAMapApiLoader({
  key: "あなたのキー", //ここに申請したAmapのキーを記入します
  プラグイン: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  v: "1.4.15",
  uiバージョン: "1.1"
});

<テンプレート>
  <div>
    <div class="検索ボックス">
      <el-入力
        v-model="検索キー"
        タイプ="検索"
        id="検索"
        placeholder="詳細な住所を入力してください"
      </el-input> ...
      <!--<button @click="searchByHand">検索</button>-->
      <div class="tip-box" id="検索ヒント"></div>
    </div>
    <!--
      amap-manager: マップ管理オブジェクト vid: マップコンテナノードのID
      zooms: マップ表示のズームレベルの範囲。PC では、デフォルトの範囲は [3,18] で、値の範囲は [3-18] です。モバイル デバイスでは、デフォルトの範囲は [3-19] で、値の範囲は [3-19] です。
      center: マップの中心点の座標値 plugin: マップで使用されるプラグイン events: イベント -->
    <div class="amap-box">
      <el-amap
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="ズーム"
        :plugin="プラグイン"
        :center="中央"
        :events="イベント"
      >
        <!-- タグ -->
        <el-amap-marker
          v-for="(マーカー、インデックス) マーカー内"
          :position="マーカー"
          :key="インデックス"
        </el-amap-marker>
      </el-amap>
    </div>
  </div>
</テンプレート>
<スクリプト>
「vue-amap」から { AMapManager、lazyAMapApiLoaderInstance } をインポートします。
amapManager を新しい AMapManager() にします。
エクスポートデフォルト{
  プロパティ: ["city", "value", "longitude", "latitude", "isEdit"],
  データ（） {
    自分自身 = this とします。
    戻る {
      アドレス: null、
      検索キー: "",
      amapManager、
      マーカー: [],
      検索オプション: {
        都市: this.city ? this.city : "国立",
        都市制限: 真
      },
      中心: [121.329402, 31.228667],
      ズーム: 17,
      長さ: 0,
      緯度: 0,
      ロード済み: false、
      イベント: {
        初期化() {
          lazyAMapApiLoaderInstance.load().then(() => {
            自己検索を初期化します。
          });
        },
        // クリックして住所データを取得します click(e) {
          自己マーカー = [];
          lng, lat を e.lnglat とします。
          自己.lng = lng;
          自己緯度 = 緯度;
          self.center = [経度、緯度];
          self.markers.push([lng, lat]);
          // これは Amap SDK を通じて行われます。
          ジオコーダを新しいAMap.Geocoder({
            半径: 1000,
            拡張子: 「すべて」
          });
          geocoder.getAddress([lng, lat], 関数(ステータス, 結果) {
            if (status === "完了" && result.info === "OK") {
              if (結果 && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.searchKey = result.regeocode.formattedAddress;
                self.$emit("updateLocation", lng, lat, self.searchKey);
                自分自身。$nextTick();
              }
            }
          });
        }
      },
      // いくつかのツールプラグイン plugin: [
        {
          // 位置 pName: "Geolocation",
          イベント: {
            初期化(o) {
              // o は Amap ポジショニングプラグインインスタンスです o.getCurrentPosition((status, result) => {
                if (結果 && 結果.位置) {
                  if (self.isEdit) {
                    // 経度を設定します。self.lng = self.longitude;
                    // 次元を設定します。self.lat = self.latitude;
                    // 座標を設定します。self.center = [self.longitude, self.latitude];
                    self.markers.push([self.longitude, self.latitude]);
                  } それ以外 {
                    // 経度を設定します。self.lng = result.position.lng;
                    // 次元を設定します。self.lat = result.position.lat;
                    // 座標を設定します。self.center = [self.lng, self.lat];
                    self.markers.push([self.lng, self.lat]);
                  }
                  // 負荷
                  自己ロード = true;
                  //ページがレンダリングされた後 self.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
  作成された() {
    if (this.value) {
      this.searchKey = this.value;
      this.address = this.value;
    }
    (this.経度 && this.緯度) の場合 {
      this.lng = this.longitude;
      this.lat = this.latitude;
      this.center = [this.longitude, this.latitude];
      this.markers.push([this.longitude, this.latitude]);
    }
  },
  メソッド: {
    // 住所を選択したら、現在の住所の近くを自動的に検索します updateAddress(value, longitude, latitude) {
      this.searchKey = 値;
      this.address = 値;
      this.lng = 経度;
      this.lat = 緯度;
      this.center = [経度、緯度];
      this.markers.push([経度, 緯度]);
    },
    initSearch() {
      vm = this とします。
      map = this.amapManager.getMap(); とします。
      AMapUI.loadUI(["misc/PoiPicker"], 関数(PoiPicker) {
        poiPicker = 新しい PoiPicker({
          入力: "検索",
          場所検索オプション: {
            地図: 地図、
            ページサイズ: 10
          },
          提案コンテナ: "検索ヒント",
          searchResultsContainer: "検索ヒント"
        });
        poiPicker は、次のコードで定義されます。
        // poi選択情報をリッスンする poiPicker.on("poiPicked", function(poiResult) {
          ソースを poiResult.source とします。
          poi = poiResult.item とします。
          if (source !== "検索") {
            poiPicker.searchByKeyword(poi.name);
          } それ以外 {
            poiPicker.clearSearchResults();
            vm.マーカー = [];
            lng = poi.location.lng; とします。
            lat = poi.location.lat; とします。
            address = poi.name; // poi.cityname + poi.adname + poi.name とします
            vm.center = [経度、緯度];
            vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = 緯度;
            vm.address = アドレス;
            vm.searchKey = アドレス;
            vm.$emit("updateLocation", lng, lat, vm.searchKey);
          }
        });
      });
    },
    手で探す() {
      this.searchKey !== "" && this.poiPicker の場合 {
        this.poiPicker.searchByKeyword(this.searchKey);
      }
    }
  }
};
</スクリプト>
<style lang="スタイラス">
.検索ボックス{
  上マージン: 6px;
  幅: 100%;
}
.検索ボックス入力{
  パディング: 0 15px;
  幅: 100%;
  高さ: 32px;
  行の高さ: 32px;
  色: #606266;
  境界線: 1px 実線 #dcdfe6;
  境界線の半径: 4px;
}
.検索ボックス入力:フォーカス{
  境界線の色: #409eff;
  アウトライン: 0;
}
.search-box 入力::-webkit-input-placeholder {
  色: #c0c4cc;
}
.tip-box {
  幅: 100%;
  最大高さ:280px;
  位置: 絶対;
  上: 72px;
  zインデックス: 10000;
  オーバーフロー-y: 自動;
  背景色: #fff;
}
</スタイル>
<スタイル>
.amap-ui-poi-picker-sugg、
.amap_lib_placeSearch {
  境界線: 1px 実線 #eee;
  境界線の半径: 4px;
}
.amap-box {
  高さ: 200px;
}
</スタイル>

<テンプレート>
  <el-ダイアログ
    :title="タイトル"
    :visible.sync="表示"
    :before-close="ハンドルを閉じる"
    幅=”600ピクセル”
    本文に追加
    :クリック時に閉じるモーダル="false"
    : エスケープキーを押すと閉じる = "false"
  >
    <div class="フォーム情報">
      <el-フォーム
        :model="フォーム"
        ref="フォーム"
        :rules="ルール"
        サイズ="小"
        ラベル幅="110px"
      >
        <el-form-item label="住所を選択" prop="住所">
          <ベースマップ検索
            ref="マップ検索"
            :city="フォーム.city"
            :value="フォーム.アドレス"
            :longitude="form.addLon"
            :latitude="form.addLat"
            :isEdit="編集"
            @updateLocation="場所を更新"
          />
        </el-form-item>
        <el-行>
          <el-col :span="12">
            <el-form-item prop="addLon" label="経度">
              <el-入力
                v-model.number="form.addLon"
                :最大長="15"
                placeholder="経度を入力してください"
              </el-input> ...
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-label-form-item">
            <el-form-item prop="addLat" label="緯度">
              <el-入力
                v-model.number="form.addLat"
                :最大長="15"
                placeholder="緯度を入力してください"
              </el-input> ...
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-ダイアログ>
</テンプレート>
<スクリプト>
「../base/mapSearch/baseMapSearch」からBaseMapSearchをインポートします。
エクスポートデフォルト{
    プロパティ: ["visible", "isEdit", "detail"],
    コンポーネント:
      ベースマップ検索
    },
    データ（） {
        戻る {
            タイトル:「住所を追加」、
            形状： {
                住所： ""、
                追加Lon: "",
                緯度を追加: ""
            },
            ルール:
                住所：
                  {
                    必須: true、
                    メッセージ:「住所を入力してください」
                    トリガー: ["ぼかし"、"変更"]
                  }
                ]、
                追加緯度: [
                  {
                    必須: true、
                    メッセージ:「緯度を入力してください」
                    トリガー: ["ぼかし"、"変更"]
                  }
                ]、
                追加Lon: [
                  {
                    必須: true、
                    メッセージ:「経度を入力してください」
                    トリガー: ["ぼかし"、"変更"]
                  }
                ]、
            }
        };
    },
    作成された() {
      if (this.isEdit) {
        この.initForm();
      }
    },
    メソッド: {
        // フォームを初期化する initForm() {
          this.title = "住所の変更";
          if (this.detail) {
            this.form = { ... this.detail };
          }
        },
        // マップ検索場所 updateLocation(lng, lat, address) {
          this.form.addLon = lng;
          this.form.addLat = lat;
          this.form.address = アドレス;
        },
        ハンドルクローズ() {
          this.$emit("update:visible", false);
        }
    }
};
</スクリプト>

モジュール.エクスポート = {
    // ...
    グローバル:
      Aマップ: 偽、
      AMapUI: 偽
    }
};