<!-- 
<template>
    <div class="amap-page-container">
         <el-amap ref="map" vid="amapDemo"  :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
            <el-amap-marker v-for="marker in markers":key="i" :position="marker.position"></el-amap-marker>
         </el-amap> -->
       
         <!-- <div class="toolbar">
           <button @click="getMap()">get map</button>
         </div> -->
       <!-- </div>
     </template>
    
     <style>
       .amap-page-container {
         height: 400px;
       }
     </style> -->
     <!-- <script>

import VueAMap from 'vue-amap';
 
 Vue.use(VueAMap);
  
 VueAMap.initAMapApiLoader({
  
   // 高德的keye
  
   key: 'cb087c0fb3b8bc56a4af064630495bb9',
  
   uiVersion: '1.0.11' ,// 版本号
  
   // 插件集合
  
   plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  
   // 高德 sdk 版本，默认为 1.4.4
  
   v: '1.4.4'
 
});
    //    import { AMapManager } from 'vue-amap';
       // import { AMap } from 'vue-amap';
        export default {
         data () {
           return {
           
             zoom: 15,
             center: [117.148118, 36.660223],
               markers: [
               {
                 position: [117.148118, 36.660223],
                 events: {
                   click: () => {
                     alert('click marker');
                   },
                   dragend: (e) => {
                     console.log('---event---: dragend')
                     this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                   }
                 },
                 visible: true,
                 draggable: false,
                 template: '<span>1</span>',
               }
             ],
               events: {
               init: (o) => {
                 console.log(o.getCenter())
                 console.log(this.$refs.map.$$getInstance())
                 o.getCity(result => {
                   console.log(result)
                 })
               },
               'moveend': () => {
               },
               'zoomchange': () => {
               },
               'click': (e) => {
                 let {lng,lat} = e.lnglat;
                 self.lng = lng;
                 self.lat = lat;
                  console.log(self.lng,self.lat)
                  let points = [self.lng,self.lat]
                  this.getAddress(points)
                  let marker = {
                   position: [self.lng, self.lat]
             };
              if (!this.markers.length) return;
                 this.markers.splice(this.markers.length - 1, 1);
    
                 this.markers.push(marker);
               }
             },
            
              getAddress (points) {
              let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" })
                geocoder.getAddress(points, (status, result) => {
                if (status === 'complete' && result.regeocode) {
                this.address = result.regeocode.formattedAddress
                  console.log(this.address)
           }
         })
       },
             plugin: ['ToolBar', {
               pName: 'MapType',
               defaultType: 0,
               events: {
                 init(o) {
                   console.log(o);
                 }
               }
             }],
             texts: [
               {
                 position: [121.5273285, 31.21515044],
                 text: 'hello world',
                 offset: [0, 0],
                 events: {
                   click: () => {
                     alert('click text');
                   }
                 }
               }
             ]
           }
         },
            methods: {
           getMap() {
                console.log(AMapManager._componentMap);
             // gaode map instance
                console.log(AMapManager._map);
               alert('click text');
           }
         }
       };
   </script> -->