<template>
  <div id="container">
  </div>
</template>

<script>  
import shuijing from '../assets/shuijing.svg'
  export default {
    name: "v-map",
    props: {
      center: {
        type: Array,
        default: () => [],
      },
      zoom: {
        type: Number,
        default: 16
      },
      positions: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        map: null,
        recomposeShow: false,
        address:'',
        current_market: []
      }
    },
    watch:{
      center: {
        handler(val) {
          this.initMap()
        },
        deep: true,
      },
      positions: {
        handler(val){
          this.addIcon()
        },
        deep: true
      }
    },
    methods: {
      addIcon() {
        const map = this.map
        this.current_market.forEach(market => {
          map.remove(market)
        })
        var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
        this.positions.forEach(item => {
          const { lng, lat } = item
          const icons = new AMap.Icon({
            image: shuijing, //自定义图标路径
            size: new AMap.Size(130, 130), //图片大小
            imageSize: new AMap.Size(50, 50), //图片拉伸设置
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat), //定义图标的位置
            offset: new AMap.Pixel(0, 0), //设置图标偏移量
            icon: icons, //自定义图标路径
            title: '', //设置标题
            draggable: false, //是否可以拖拽
            clickable: true
          });
          marker.on('click',(e) => {
            this.$emit("handlerRecomposeShow",true)
          })
          map.add(marker);
          this.current_market.push(marker)
        })
        map.setLayers(layers);
        map.addControl(new AMap.ToolBar()); // 添加组合控件
        map.addControl(new AMap.Scale()); // 添加比例尺
        map.addControl(new AMap.HawkEye({ isOpen: true })); // 添加鹰眼控件
        map.addControl(new AMap.MapType({ defaultType: 1 })); // 添加图层切换控件
        map.addControl(new AMap.Geolocation()); // 添加定位
        map.on('click', function (e) {
          const { lng, lat } = e.lnglat;
          addMarker({ lng, lat });
          addInfo({ lng, lat });
        });
        var PlaceSearchOptions = {
          city: '420000', // 城市
          type: '', // 数据类别
          pageSize: 10, // 每页结果数,默认10
          pageIndex: 1, // 请求页码，默认1
          extensions: 'base', // 返回信息详略，默认为base（基本信息）
        };
        state.MSearch = new AMap.PlaceSearch(PlaceSearchOptions); // 构造PlaceSearch类
        state.MSearch.search(state.keyWord, keywordSearch_CallBack);
        AMap.Event.addListener(state.MSearch, 'complete', keywordSearch_CallBack); 
      },
      initMap() {
        var map = new AMap.Map('container', {
          viewMode: '3D',
          center: this.center,
          layers: [new AMap.TileLayer.Satellite()],
          zoom: this.zoom,
          resizeEnable: true
        });
        this.map = map
        this.addIcon()
      }
    },
    mounted() {
      this.initMap()
    }
  }
</script>


<style scoped>

</style>