<template>
  <el-amap
    :zoom="14"
    ref="map"
    vid="amapDemo"
    style="height: 300px;"
    :amap-manager="amapManager"
    :center="center"
    class="amap-demo"
  >
    <el-amap-marker
      :position="center"
      title="教学点"
    ></el-amap-marker>
    <el-amap-text
      :text="address"
      :position="center"
      :offset="[0, 20]"
    ></el-amap-text>
  </el-amap>
</template>
<script>
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
VueAMap.initAMapApiLoader({
  key: "b1e6ac2eb28902ce91a490edf194e000",
  plugin: [
    "Autocomplete",
    "PlaceSearch",
    "Scale",
    "OverView",
    "ToolBar",
    "MapType",
    "PolyEditor",
    "AMap.CircleEditor",
  ],
  v: "1.4.4",
});
export default {
  props: ['longitudeLatitude', 'address'],
  data() {
    console.log(this.address)
    return {
      amapManager,
      center: (this.longitudeLatitude || '').split(',')
    }
  }
};
</script>
