<template>
    <!-- <div>
        <a-input-search
      placeholder="请输入搜索的地址"
      @search="onSearch"
      enterButton="Search"
      style="width: 300px;margin-left: 20px;"
    />
    </div> -->
    <div id="mapBox" style="width: 100%; height: 100%;"></div>
  </template>
   
  <script>
  export default {
    name: 'TencentMap',
    data() {
        return {
            map: null,
            markerLayer: null
        }
    },
    mounted() {
      // 初始化地图
      this.initMap({});
    },
    methods: {
        initMap(params) {
            //定义地图中心点坐标
            let center = new TMap.LatLng(params.lat||39.916527, params.lng||116.397128)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            this.map = new TMap.Map(document.getElementById('mapBox'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
            if(params.lat) {
                this.setMakerLayer(params,false)
            }
            //监听点击事件添加marker
            this.map.on("click", (evt) => {
                this.setMakerLayer(evt.latLng)
                this.$emit('setDot',{
                    ...evt.latLng
                })                    
            });
        },
        setMakerLayer(params,type){
            if(type) {
                let center = new TMap.LatLng(params.lat||39.916527, params.lng||116.397128)
                this.map.setCenter(center);
            }
            if(this.markerLayer){
                this.markerLayer.setMap(null)
            }
            if(params.lat){
                this.markerLayer = new TMap.MultiMarker({
                    id: 'marker-layer',
                    map: this.map
                })
                this.markerLayer.add({
                    position: params
                });
            }
            
        }
    }
  }
  </script>