Installations- und Verwendungsschritte für vue-amap

importiere VueAMap von „vue-amap“;
Vue.use(VueAMap);
// vue-amap initialisieren
VueAMap.initAMapApiLoader({
  key: "dein Schlüssel", //Schreibe hier den Schlüssel der Amap, für die du dich beworben hast
  Plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  Version: "1.4.15",
  uiVersion: "1.1"
});

<Vorlage>
  <div>
    <div Klasse="Suchfeld">
      <el-Eingabe
        v-model="Suchschlüssel"
        Typ="Suche"
        id="Suche"
        Platzhalter="Bitte geben Sie die genaue Adresse ein"
      ></el-Eingabe>
      <!--<button @click="searchByHand">Suchen</button>-->
      <div Klasse="tip-box" id="searchTip"></div>
    </div>
    <!--
      amap-manager: Kartenverwaltungsobjekt vid: ID des Kartencontainerknotens
      zooms: Der Zoomstufenbereich der Kartenanzeige. Auf dem PC ist der Standardbereich [3,18] und der Wertebereich [3-18]. Auf Mobilgeräten ist der Standardbereich [3-19] und der Wertebereich [3-19].
      center: Koordinatenwert des Mittelpunkts der Karte plugin: von der Karte verwendetes Plugin events: events -->
    <div Klasse="amap-box">
      <el-amap
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="Zoom"
        :plugin="Plugin"
        :mitte="Mitte"
        :events="Ereignisse"
      >
        <!-- Tags -->
        <el-amap-marker
          v-for="(Markierung, Index) in Markierungen"
          :position="Markierung"
          :Schlüssel="Index"
        ></el-amap-marker>
      </el-amap>
    </div>
  </div>
</Vorlage>
<Skript>
importiere { AMapManager, lazyAMapApiLoaderInstance } von „vue-amap“;
let amapManager = neuer AMapManager();
Standard exportieren {
  Requisiten: ["Stadt", "Wert", "Längengrad", "Breitengrad", "isEdit"],
  Daten() {
    lass self = dies;
    zurückkehren {
      Adresse: null,
      Suchbegriff: "",
      amapManager,
      Markierungen: [],
      Suchoption: {
        Stadt: diese.Stadt ? diese.Stadt : "National",
        Stadtgrenze: wahr
      },
      Mitte: [121.329402, 31.228667],
      Zoom: 17,
      Länge: 0,
      Breite: 0,
      geladen: falsch,
      Ereignisse: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch();
          });
        },
        // Klicken Sie hier um die Adressdaten abzurufen click(e) {
          selbst.marker = [];
          lass { lng, lat } = e.lnglat;
          selbst.lng = lng;
          selbst.lat = lat;
          selbst.Mitte = [Länge, Breite];
          selbst.Markierungen.drücken([lng, lat]);
          // Dies erfolgt über das Amap SDK.
          let geocoder = new AMap.Geocoder({
            Radius: 1000,
            Erweiterungen: „alle“
          });
          geocoder.getAddress([lng, lat], Funktion(Status, Ergebnis) {
            if (status === "abgeschlossen" && result.info === "OK") {
              if (Ergebnis && Ergebnis.regeocode) {
                selbst.Adresse = Ergebnis.regeocode.formatierteAdresse;
                self.Suchschlüssel = Ergebnis.Regeocode.formatierteAdresse;
                self.$emit("updateLocation", Länge, Breite, self.Suchschlüssel);
                selbst.$nächsterTick();
              }
            }
          });
        }
      },
      // Einige Tool-Plugins Plugin: [
        {
          // Position pName: "Geolokalisierung",
          Ereignisse: {
            init(o) {
              // o ist die Instanz des Amap-Positionierungs-Plugins o.getCurrentPosition((status, result) => {
                if (Ergebnis && Ergebnis.Position) {
                  wenn (selbst.istBearbeiten) {
                    // Längengrad festlegen self.lng = self.longitude;
                    //Dimension festlegen self.lat = self.latitude;
                    // Koordinaten festlegen self.center = [self.longitude, self.latitude];
                    self.markers.push([selbst.Länge, selbst.Breitengrad]);
                  } anders {
                    // Längengrad festlegen self.lng = result.position.lng;
                    //Dimension festlegen self.lat = result.position.lat;
                    // Koordinaten festlegen self.center = [self.lng, self.lat];
                    self.markers.push([self.lng, self.lat]);
                  }
                  // laden
                  selbst geladen = wahr;
                  //Nachdem die Seite gerendert wurde self.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
  erstellt() {
    wenn (dieser.Wert) {
      dieser.Suchschlüssel = dieser.Wert;
      diese.Adresse = dieser.Wert;
    }
    wenn (diese.Länge && diese.Breite) {
      dies.lng = dies.Längengrad;
      dies.lat = diese.Breitengrad;
      dieses.Zentrum = [diese.Länge, diese.Breite];
      dies.markers.push([diese.Länge, diese.Breite]);
    }
  },
  Methoden: {
    // Nach Auswahl einer Adresse automatisch in der Nähe der aktuellen Adresse lokalisieren updateAddress(value, longitude, latitude) {
      this.searchKey = Wert;
      diese.Adresse = Wert;
      this.lng = Längengrad;
      this.lat = Breitengrad;
      this.center = [Längengrad, Breitengrad];
      this.markers.push([Längengrad, Breitengrad]);
    },
    initSearch() {
      lass vm = dies;
      lass map = this.amapManager.getMap();
      AMapUI.loadUI(["misc/PoiPicker"], Funktion(PoiPicker) {
        let poiPicker = neuer PoiPicker({
          Eingabe: "Suche",
          OrtSuchoptionen: {
            Karte: Karte,
            Seitengröße: 10
          },
          suggestContainer: "Suchtipp",
          searchResultsContainer: "Suchtipp"
        });
        vm.poiPicker = poiPicker;
        // Auf Informationen zum ausgewählten POI warten poiPicker.on("poiPicked", function(poiResult) {
          Lassen Sie Quelle = poiResult.source;
          lass poi = poiResult.item;
          wenn (Quelle !== "Suche") {
            poiPicker.searchByKeyword(poi.name);
          } anders {
            poiPicker.clearSearchResults();
            vm.marker = [];
            sei lng = poi.location.lng;
            lass lat = poi.location.lat;
            let Adresse = poi.name; // poi.Stadtname + poi.Anzeigenname + poi.name
            vm.center = [Länge, Breite];
            vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = lat;
            vm.address = Adresse;
            vm.searchKey = Adresse;
            vm.$emit("updateLocation", Länge, Breite, vm.searchKey);
          }
        });
      });
    },
    sucheNachHand() {
      wenn (dieser.Suchschlüssel !== "" und dieser.poiPicker) {
        dies.poiPicker.searchByKeyword(dieses.searchKey);
      }
    }
  }
};
</Skript>
<style lang="stylus">
.Suchfeld {
  Rand oben: 6px;
  Breite: 100 %;
}
.Suchfeldeingabe {
  Polsterung: 0 15px;
  Breite: 100 %;
  Höhe: 32px;
  Zeilenhöhe: 32px;
  Farbe: #606266;
  Rand: 1px durchgezogen #dcdfe6;
  Rahmenradius: 4px;
}
.Suchfeld Eingabe:Fokus {
  Rahmenfarbe: #409eff;
  Umriss: 0;
}
.Suchfeldeingabe::-WebKit-Eingabeplatzhalter {
  Farbe: #c0c4cc;
}
.tip-box {
  Breite: 100 %;
  maximale Höhe: 280px;
  Position: absolut;
  oben: 72px;
  Z-Index: 10000;
  Überlauf-y: automatisch;
  Hintergrundfarbe: #fff;
}
</Stil>
<Stil>
.amap-ui-poi-picker-sugg,
.amap_lib_placeSearch {
  Rand: 1px durchgezogen #eee;
  Rahmenradius: 4px;
}
.amap-box {
  Höhe: 200px;
}
</Stil>

<Vorlage>
  <el-dialog
    :title="Titel"
    :visible.sync="sichtbar"
    :before-close="HandleSchließen"
    Breite="600px"
    An den Hauptteil anhängen
    :Schließen bei Klick-Modal="false"
    :Schließen beim Drücken von Escape="false"
  >
    <div Klasse="Formular-Info">
      <el-form
        :model="Formular"
        ref="Formular"
        :Regeln="Regeln"
        Größe="klein"
        Beschriftungsbreite = "110px"
      >
        <el-form-item label="Adresse auswählen" prop="Adresse">
          <Basiskartensuche
            ref="Kartensuche"
            :Stadt="Formular.Stadt"
            :Wert="Formular.Adresse"
            :Längengrad="form.addLon"
            :Breitengrad="form.addLat"
            :isEdit="istEdit"
            @updateLocation="Standort aktualisieren"
          />
        </el-form-item>
        <el-Zeile>
          <el-col :span="12">
            <el-form-item prop="addLon" label="Längengrad">
              <el-Eingabe
                v-Modell.Nummer="form.addLon"
                :maximale Länge="15"
                Platzhalter="Bitte Längengrad eingeben"
              ></el-Eingabe>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-label-form-item">
            <el-form-item prop="addLat" label="Breitengrad">
              <el-Eingabe
                v-Modell.Nummer="form.addLat"
                :maximale Länge="15"
                Platzhalter="Bitte Breitengrad eingeben"
              ></el-Eingabe>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</Vorlage>
<Skript>
importiere BaseMapSearch aus "../base/mapSearch/baseMapSearch";
Standard exportieren {
    Requisiten: ["sichtbar", "isEdit", "Detail"],
    Komponenten:
      BaseMapSearch
    },
    Daten() {
        zurückkehren {
            Titel: "Adresse hinzufügen",
            bilden: {
                Adresse: "",
                hinzufügenLon: "",
                addLat: ""
            },
            Regeln:
                Adresse:
                  {
                    erforderlich: wahr,
                    Meldung: "Bitte geben Sie die Adresse ein",
                    Auslöser: ["verwischen", "ändern"]
                  }
                ],
                addLat: [
                  {
                    erforderlich: wahr,
                    Meldung: "Bitte geben Sie den Breitengrad ein",
                    Auslöser: ["verwischen", "ändern"]
                  }
                ],
                hinzufügenLon: [
                  {
                    erforderlich: wahr,
                    Meldung: "Bitte Längengrad eingeben",
                    Auslöser: ["verwischen", "ändern"]
                  }
                ],
            }
        };
    },
    erstellt() {
      wenn (dies.istBearbeiten) {
        diese.initForm();
      }
    },
    Methoden: {
        // Initialisiere das Formular initForm() {
          this.title = "Adresse ändern";
          wenn (dieses.detail) {
            dieses.Formular = { ...dieses.Detail };
          }
        },
        // Kartensuchstandort updateLocation(lng, lat, address) {
          diese.form.addLon = lng;
          this.form.addLat = lat;
          this.form.address = Adresse;
        },
        handleClose() {
          dies.$emit("update:sichtbar", false);
        }
    }
};
</Skript>

modul.exporte = {
    // ...
    Globale:
      AMap: falsch,
      AMapUI: falsch
    }
};