<template>
    <div class="app-container">
      <div class="amap-page-container">
<!--        <el-amap ref="map" vid="amap" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">-->
<!--        </el-amap>-->
        <el-amap
          vid="amap"
          :zoom="zoom"
          :plugin="plugin"
          class="amap-demo"
          :center="center"
        >
        </el-amap>
        <div class="toolbar">
          <span v-if="loaded">
          location: lng = {{ lng }} lat = {{ lat }}
          </span>
          <span v-else>正在定位</span>
        </div>
<!--        <div class="toolbar">-->
<!--          <button @click="getMap()">get map</button>-->
<!--        </div>-->
      </div>
    </div>
</template>

<script>
    import VueAMap from "vue-amap";
    export default {
      name: "mapCom",
      data() {
        const self = this;
        return {
          center: [104.07 , 30.67],
          zoom:8,
          lng: 0,
          lat: 0,
          loaded: false,
          plugin: [
            {
              // enableHighAccuracy: true,//是否使用高精度定位，默认:true
              // timeout: 100,          //超过10秒后停止定位，默认：无穷大
              // maximumAge: 0,           //定位结果缓存0毫秒，默认：0
              // convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              // showButton: true,        //显示定位按钮，默认：true
              // buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
              // showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
              // showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
              // panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
              // zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
              // extensions:'all',
              pName: 'Geolocation',
              events: {
                init(o) {
                  // o 是高德地图定位插件实例
                  console.log(o)
                  o.getCurrentPosition((status, result) => {
                    console.log(result)
                    if (result && result.position) {
                      self.lng = result.position.lng;
                      self.lat = result.position.lat;
                      self.center = [self.lng, self.lat];
                      self.loaded = true;
                      self.$nextTick();
                    }
                  });
                }
              }
            },
            {
              pName: 'ToolBar',  //工具栏
              events: {
                init(instance) {
                  // console.log(instance);
                }
              }
            },
            {
              pName: 'OverView',  //工具栏
              events: {
                init(instance) {
                  console.log(instance);
                }
              }
            },
            {
              pName: 'MapType',  //工具栏
              events: {
                init(instance) {
                  console.log(instance);
                }
              }
            },
            {
              pName: 'PlaceSearch',  //工具栏
              events: {
                init(instance) {
                  console.log(instance);
                }
              }
            }
          ]
        }
      },
      methods:{
        getMap() {
          // amap vue component
          // console.log(VueAMap);
          let that = this
          VueAMap.service(['AMap.PlaceSearch'], ()=> {
              let placeSearch = new PlaceSearch({
                city:'成都',
                citylimit:true,
                type:that.keytype,
                pageSize:12,
                pageIndex:1,
                panel:'panel'
              })

          })
        }
      }
    }
</script>

<style scoped>
  .amap-demo {
    height: 600px;
  }
</style>