<template>
    <div>
        <el-amap-search-box
          class="search-box"
          :search-option="searchOption" 
          :on-search-result="onSearchResult"	
        ></el-amap-search-box>
      <div class="amap-page-container">
      <!-- // 搜索的组件 cv就可 -->
        <el-amap	
          ref="map"
          vid="amapDemo"
          :amap-manager="amapManager"
          :center="center"
          :zoom="zoom"
          :plugin="plugin" 
          :events="events"
          class="amap-demo"
        >
           <!-- //点标记在地图上显示的位置，默认为地图中心点。  只position绑定center就好了	 -->
          <el-amap-marker :position="center"></el-amap-marker>
        </el-amap>
      </div>
    </div>
  </template>
  <script>
  //引入 获取实例
  import { AMapManager } from "vue-amap";
  let amapManager = new AMapManager();
  let Geocoder; //先声明变量，
  export default {
    data() {
      let self = this;
      return {
        amapManager,
        zoom: 12,
        input: "",
        markers: [],
        searchOption: {
          city: "杭州",
          citylimit: false,
        },
        center: [120.19, 30.26],
        events: {
          init: (o) => {
            o.getCity((result) => {
              console.log(result);
            });
          },
          moveend: () => {},
          zoomchange: () => {},
          click: (e) => {
            self.center = [e.lnglat.lng, e.lnglat.lat];
            Geocoder.getAddress(self.center, function (status, result) { //根据坐标获取位置
              if (status === "complete" && result.info === "OK") {
                self.input = result.regeocode.formattedAddress;
                self.$refs.searchBox.keyword = self.input;
              } 
            });
          },
        },
        plugin: [
          {
            pName: "Geocoder", //使用AMap.Geocoder插件
            events: {
              init(o) {
                 Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用了
                 //self.center 具体坐标 （数组格式） ，function 回调函数
                 o.getAddress(self.center, function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                          //result.regeocode.formattedAddress就是具体位置
                          self.input = result.regeocode.formattedAddress;
                          //对搜索组件的input进行赋值
                          self.$refs.searchBox.keyword = self.input;
                        }
                });
              },
            },
          },
          {
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            pName: "Geolocation", // AMap-Geolocation 定位插件
            events: {
              init(o) {
                  //getCurrentPosition 获取当前位置的方法 
                  //注意 虽然进页面就会调用这个方法，但是data()中center要有默认值，不然会报错
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    let lng = result.position.lng;
                    let lat = result.position.lat;
                    self.center = [lng, lat];
                    self.loaded = true;
                    self.zoom = 14;
                    self.$nextTick();
                  }
                });
              },
            },
          },
        ],
      };
    },
    methods: {
        //点击搜索后触发的事件
      onSearchResult(pois) {
       if (pois.length > 0) {
          this.$nextTick(() => {
            this.$refs.searchBox.keyword = pois[0].name;
          });
        }
        //这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
        this.center = [pois[0].lng, pois[0].lat];
      },
    },
  };
  </script>
  <style scoped>
  .amap-page-container {
    width: 100%;
    height: 500px;
    /* margin-bottom: 20px; */
  }
  </style>
  <style>
  .el-vue-search-box-container {
    width: 100% !important;
    /* margin-bottom: 10px; */
  }
  </style>
  