Best Practices für die Entwicklung von Amap-Anwendungen mit Vue

const loadScripts = asynchrone Skripte => {
  const get = src => {
    returniere neues Promise(Funktion(auflösen, ablehnen) {
      const el = document.createElement('Skript')
      el.addEventListener('laden', Funktion() {
        auflösen (Quelle)
      }, FALSCH)
      el.addEventListener('Fehler', Funktion() {
        ablehnen(Quelle)
      }, FALSCH)
      el.id = src.id
      el.src = src.url
      document.getElementsByTagName('body')[0].appendChild(el) || document.getElementsByTagName('head')[0].appendChild(el)
    })
  }

  const meinePromises = scripts.map(async script => {
    wenn (document.getElementById(script.id) === null) {
      Rückgabe, warte auf „get“ (Skript)
    }
  })

  returniere und warte auf Promise.all(meinePromises)
}

Standard-LoadScripts exportieren

<Vorlage>
  <div
    :Stil="{
      Breite: Breite,
      Höhe: Höhe
    }"
    Klasse="amap-container"
  >
    <div ref="amap" class="amap">
      <Steckplatz />
    </div>
  </div>
</Vorlage>

<style lang="scss" scoped>
    .amap-container {
    .amap {
        Breite: 100 %;
        Höhe: 100%;
    }
    }
</Stil>

importiere loadScripts aus '@/loadScripts'
Standard exportieren {
  Name: 'AMapContainer',
  Requisiten: {
    Breite: {
      erfordern: falsch,
      Typ: Zeichenfolge,
      Standard: „100 %“
    },
    Höhe:
      erfordern: falsch,
      Typ: Zeichenfolge,
      Standard: „600px“
    },
    Optionen:
      erfordern: falsch,
      Typ: Objekt,
      Standard: () => {}
    }
  },
  Daten: () => ({
    amap: null,
    amapInfo:
      Schlüssel: "xxxxxxxxxxxxxxx"
    }
  }),
  erstellt() {
    dies.initAMap()
  },
  vorZerstören() {
    // Zerstöre die Karte, wenn (!this.amap) {
      zurückkehren
    }
    dies.amap.destroy()
    this.amap = null
  },
  Methoden: {
    initAMap() {
      LadeSkripte([{
        ID: 'ampa',
        URL: `https://webapi.amap.com/maps?v=2.0&key=${this.amapInfo.key}&plugin=AMap.PolygonEditor`
      }]).then(() => {
        this.amap = neues Fenster.AMap.Map(this.$refs['amap'], this.options)
        dies.$emit('map', dies.amap, fenster.AMap)
      })
    }
  }
}

<Vorlage>
    <amap-container Höhe="100%" :Optionen="amapOptions" @map="getAMapData" />
</Vorlage>

<Skript>
    importiere AMap aus '@/components/AMap'

    Standard exportieren {
        Name: 'AMapDemo',
        Komponenten:
            'amap-container': AMap
        },
        Daten: () => ({
            amapOptionen: {
                Zoom: 14,
                resizeEnable: wahr,
                Ansichtsmodus: "3D",
                Kartenstil: "amap://styles/normal"
            },
            AMap: null, // Map-Objekt amap: null // aktuelle Map-Instanz }),
        Methoden: {
            /**
             * Rückruf zum Abschluss des Kartenladens * @param amap
             * @param AMap
             */
            getAMapData(amap, AMap) {
                // Holen Sie sich das Map-Amap-Objekt aus der Komponente this.amap = amap
                // Holen Sie sich das statische Map-AMap-Objekt aus der Komponente this.AMap = AMap
            }
        }
    }
</Skript>

ContextCard aus „./components/ContextCard“ importieren

// Einen Marker erstellen const marker = new this.AMap.Marker({
  Karte: diese.amap,
  Position: [119.058904, 33.537069]
})
// Klickereignis marker.on('click', this.markerInfoWindow) binden

// Klicken, um das Popup-Fenster zu öffnen const markerInfoWindow = () => {
  //Instanziierung des Vue-Komponentenkonstruktors einführen const ContextCardContent = Vue.extend(ContextCard)
  // Komponente einbinden const contextCardContent = new ContextCardContent().$mount()
  // Instanziieren Sie das Fensterobjekt this.amapInfoWindow = new this.AMap.InfoWindow({
    isCustom: wahr,
    Inhalt: contextCardContent.$el,
    Offset: neu this.AMap.Pixel(0, -40)
  })
  //Öffne das Fenster this.amapInfoWindow.open(this.amap, marker.getPosition())
  // Auf Komponentenereignisse warten, um das Fenster zu schließen contextCardContent.$on('closeWindow', () => this.amapInfoWindow.close())
}

<Vorlage>
  <el-card Klasse="Kontext-Box-Karte Box-Karte">
    <div Slot="Header" Klasse="Header">
      <span>Kartenname</span>
      <el-button type="text" class="close-btn" @click="closeWindow">Schließen</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="textelement">
      {{ 'Listeninhalt' + o }}
    </div>
  </el-Karte>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'AMapContextCard',
  Methoden: {
    Fenster schließen() {
      dies.$emit('Fenster schließen')
    }
  }
}
</Skript>

<style lang="scss" scoped>
.Kontextbox-Karte {
  Breite: 320px;
  Höhe: 200px;

  .header {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
  }

  ::v-tief .el-card__header {
    Polsterung: 5px 20px;
  }
}
</Stil>

importiere Vue von „vue“;
App aus "./App.vue" importieren;

Element aus „element-ui“ importieren;

importiere "normalize.css/normalize.css";
importiere "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = falsch;

Vue.use(Element);

neuer Vue({
  rendern: (h) => h(App)
}).$mount("#app");