wenjuan/src/components/MapContainer/index.vue

<template>
  <div ref="map" style="width: 100%;height: 100%;margin: 0 auto;" />
</template>
<script>
export default {
  props: {
    // 回显数据传值
    list: {
      type: Array,
      default: [],
    },
    stutype: {
	  type: Number,
	  default: 1,
    }
  },
  data () {
    return {
      map: null,
      box: [
        {
          longitude: '',
          latitude: '',
          buildName: ''
        }
      ]
    };
  },
  mounted () {
    // console.log('list',this.list)
    this.getPosition1();
  },
  beforeDestroy () {
    this.destroyMap();
  },
  methods: {
    setlist (e) {
      this.list = e
      this.getPosition(e);
    },
    getPosition1 () { // 地图初始化
	  console.log('地图初始化')
	  const T = window.T;// 全局引入后T被注册到window里，在从这儿拿到T。T包含了天地图提供的各种方法等。
	  this.map = new T.Map(this.$refs.map);
	  console.log('this.map', this.map)
	  this.map.centerAndZoom(new T.LngLat(104.134082, 29.99563), 14);// 三个参数分别为经度，纬度，缩放等级。
    },
    getPosition (e) { // 地图初始化
      console.log(e)
      console.log('地图初始化1111')
      const longitude = e.length > 0 ? e[0].longitude : 104.134082
      const latitude = e.length > 0 ? e[0].latitude : 29.99563
      const T = window.T;// 全局引入后T被注册到window里，在从这儿拿到T。T包含了天地图提供的各种方法等。
      this.map = new T.Map(this.$refs.map);
      console.log('this.map', this.map)
      this.map.centerAndZoom(new T.LngLat(longitude, latitude), 14);// 三个参数分别为经度，纬度，缩放等级。
      if (this.stutype == 1) {
        var ctrl = new T.Control.MapType([
		  {
		    title: '地图', // 地图控件上所要显示的图层名称
		    icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
		    layer: TMAP_NORMAL_MAP, // 地图类型对象，即MapType。
		  },
		  {
		    title: '卫星',
		    icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
		    layer: TMAP_SATELLITE_MAP,
		  },
		  {
		    title: '卫星混合',
		    http: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
		    layer: TMAP_HYBRID_MAP,
		  },
		  {
		    title: '地形',
		    icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
		    layer: TMAP_TERRAIN_MAP,
		  },
		  {
		    title: '地形混合',
		    icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
		    layer: TMAP_TERRAIN_HYBRID_MAP,
		  },
        ]);
        this.map.addControl(ctrl);
	  }
      //   var lineconfig={
      // 		color: "red",            //线的颜色
      // 		weight: 2,               //线的宽度
      // 		opacity: 1,             //线的透明度
      // 		lineStyle:"solid"        //线的样式
      // 	};
      //     var points = new Array();
      //    points[0]=new T.LngLat(104.1002, 30.01831);
      //     points[1]=new T.LngLat(104.2002, 30.019);
      //     points[2]=new T.LngLat(104.3002, 30.02);
      //     var line = new T.Polyline(points,lineconfig);//创建线条的对象
      //  this.map.addOverLay(line);
      for (let index = 0; index < e.length; index++) {
        const box1 = e[index]
        var position = new T.LngLat(box1.longitude, box1.latitude)
        var icon = new T.Icon({
          iconUrl: 'https://api1.hmed1991.com/image/ly/dw.png', // 请求图标图片的URL
          iconSize: new T.Point(30, 30), // 图标可视区域的大小。
          iconAnchor: new T.Point(30, 30) // 图标的定位锚点
        });
        var label = new T.Label({
          text: box1.buildName, // 文本标注的内容
          position: position, // 文本标注的地理位置
          offset: new T.Point(-50, 20), // 文本标注的位置偏移值
          // backgroundColor:'#000',
          opacity: 0.7
        })
        label.setBackgroundColor('#000')
        label.setFontColor('#fff')
        // label.setOpacity(0.5)
        var marker = new T.Marker(position, {
          icon: icon
        })
        this.map.addOverLay(label);
        this.map.addOverLay(marker);
        const num = index
        label.addEventListener('click', (e) => {
          console.log(e)
          this.$emit('changeicon', num);
        })
      }
    },
    destroyMap () {
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
    }
  }
};
</script>
<style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #{'var(--theme)'} !important;
  color: #303133;
}
/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}
</style>