<template>
  <!-- 地图气瓶追溯 -->
  <div style="width: 100%;height: 100%;">
    <div id="container"></div>
    <i class="el-icon-close card_close" @click="close"></i>
    <div class="card_welcome" id="result">您好，欢迎进入【遵义气瓶分店】</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        map: null,
      }
    },
    mounted() {
      // this.keyUpSearch()
    },
    methods: {
      keyUpSearch() {
        var that = this
        var positions = [
          [106.643062, 26.647066],
          [106.652782, 26.644841],
          [106.648233, 26.631262],
          [106.646688, 26.623512],
          [106.631239, 26.618908]
        ];
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 13,
          center: positions[0],
        });
        AMap.service(["AMap.PlaceSearch"], function() {
          var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            map: that.map,
            panel: "result",
            autoFitView: true
          });
        })
        var markers = [];
        for (var i = 0, marker; i < positions.length; i++) {
          marker = new AMap.Marker({
            map: that.map,
            position: positions[i],
            icon: new AMap.Icon({
              image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
              imageSize: new AMap.Size(28, 38),
            }),
          });
          markers.push(marker);
        }
        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: that.map,
          path: positions,
          showDir: true,
          strokeColor: "#28F", //线颜色
          strokeWeight: 10, //线宽
        });
      },
      destroyMap() {
        this.map && this.map.destroy();
      },
      close() {
        this.destroyMap()
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  #container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #container ::v-deep .amap-logo {
    display: none !important;
    left: 0;
    height: 17px;
    margin: 0 1px;
  }

  #container ::v-deep .amap-copyright {
    display: none !important;
    left: 70px;
    height: 16px;
    font-size: 11px;
  }

  .card_close {
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 10px;
    color: red;
    font-size: 22px;
    font-weight: 700;
  }

  .card_welcome {
    position: fixed;
    padding: 5px 15px;
    top: 10px;
    width: 220px;
    left: calc(50% - 110px);
    border-radius: 6px;
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }
</style>
