<template>

  <div id="container" style="width: 1000px;height: 500px;" align="center"></div>

</template>
<script>
  export default {
    props: {
      latitude: "",
      longitude: "",
      name: ""
    },
    data() {
      return {
        tk: '1d109683f4d84198e37a38c442d68311',
        mapOptions: {
          center: [this.longitude, this.latitude],
          zoom: 16,
          style: {
            version: 8,
            sources: {
              baseLayer: {
                type: 'raster',
                tiles: [
                  'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                ],
                tileSize: 256
              },
              labelLayer: {
                type: 'raster',
                tiles: [
                  'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}',
                ],
                tileSize: 256
              }
            },
            layers: [{
                id: 'baseLayer',
                type: 'raster',
                source: 'baseLayer',
                minzoom: 0,
                maxzoom: 18
              },
              {
                id: 'labelLayer',
                type: 'raster',
                source: 'labelLayer',
                minzoom: 0,
                maxzoom: 18
              }
            ]
          },
          renderWorldCopies: false
        },
      }
    },
    created() {

    },

    mounted() {
      //初始化地图
      console.log("mounted")
      setTimeout(() => {
        // 创建一个 Marker 实例：
        var map = new AMap.Map('container', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          center: [this.longitude, this.latitude],
          zoom: 16,
          viewMode: '3D',
          showBuildingBlock: true,
          pitch: [60],
          pitchEnable: true,
          mapStyle: "amap://styles/whitesmoke",
          showIndoorMap: true,
        });
        var styleName = "amap://styles/blue";
        map.setMapStyle(styleName);
        setTimeout(() => {
          if (map.getMapStyle != "amap://styles/blue") {
            map.setMapStyle(styleName);
          }
        }, 100)
        var marker = new AMap.Marker({
          position: new AMap.LngLat(this.longitude, this.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: this.name
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
      }, 100);

    }
  }
</script>

<style lang="less">
  /*去除下标*/
  .amap-logo {
    display: none !important;
  }

  .amap-copyright {
    opacity: 0;
  }

  #container {
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  #map2 {
    width: 100%;
    height: 100%;
    position: relative;

    .mengbang {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(top,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 11, 44, 1) 100%), linear-gradient(bottom,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 11, 44, 1) 100%), linear-gradient(left,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 11, 44, 1) 100%), linear-gradient(right,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 11, 44, 1) 100%);


    }
  }
</style>
