<template>
  <div class="div_total"
       :style="{height:mapHeight+'px'}">
    <div class="div_left">
      <div class="div_search">
        <el-input placeholder="输入要搜索的名称"></el-input>
        <el-button type="primary"
                   icon="el-icon-search"
                   circle
                   @click="searchMap"></el-button>

      </div>
      <div class="map"
           id="app">
      </div>
    </div>
    <div class="div_right"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

//定义事件处理方法
var clickHandler = function (evt) {
  var lat = evt.latLng.getLat().toFixed(6);
  var lng = evt.latLng.getLng().toFixed(6);
  console.log("您点击的的坐标是：" + lat + "," + lng);
}

// 定义地图中心点坐标
var center = new window.TMap.LatLng(39.984120, 116.307484)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
var map
var search
var markers
var infoWindowList = Array(10);



export default {
  data () {
    return {

    }
  },
  components: {

  },

  async mounted () {
    this.initMap();

  },
  computed: {
    mapHeight () {

      return this.clientHeight - 130;

    },
    ...mapGetters(['clientHeight']),
  },

  methods: {
    initMap () {
      map = new window.TMap.Map(document.getElementById('app'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        viewMode: '2D'
        // pitch: 43.5, // 设置俯仰角
        // rotation: 45 // 设置地图旋转角度
      })
      // var search = new window.TMap.service.Search({ pageSize: 10 });
      // var markers = new window.TMap.MultiMarker({
      //   map: map,
      //   geometries: [],
      // });
      console.log(window.TMap)
      console.log(window)

      //Map实例创建后，通过on方法绑定点击事件
      map.on("click", clickHandler)
    },
    searchMap () {

    }


  },
  props: {

  }
}
</script>
<style>
.div_total {
  width: 100%;
  display: flex;
}
.div_left {
  width: 70%;
  height: 100%;
  position: relative;
}

.map {
  height: 100%;
}

.div_search {
  z-index: 9999;
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
}

/* .map {
  width: 100%;
  height: 400px;
} */
</style>
