admin-web-master/src/components/newmap/map.vue

<template>
  <div style="width: 100%;">
    <div id="mapContainer" class="map"></div>
  </div>
</template>
<script>
export default {
  name: 'TencentMap',
  props: {
    lat: {
      type: Number,
      default: 30.67
    },
    lng: {
      type: Number,
      default: 104.06
    },
    isonloed: {
      type: Boolean,
      default: false
    },
    isx: {
      type: Boolean,
      default: true
    },
    ontype: {
      type: String,
      default: '1'
    },
    message: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      map: null,
      marker: null,
      address: '',
      markers: [],
      infoWindow: null,
    };
  },
  mounted() {
    // 初始化地图
    // this.initMap(this.message);
  },
  methods: {
    initMap(e) {
      // 将经纬度转换为腾讯地图的LatLng对象
      const centerLatLng = new TMap.LatLng(this.lat, this.lng);
      // 创建地图实例
      this.map = new TMap.Map(document.getElementById("mapContainer"), {
        center: centerLatLng,
        zoom: 13,
        mapStyleId: 'style1'
      });
      // return
      // 创建信息窗口实例
      this.infowindow = new TMap.InfoWindow({
          map: this.map,
          position: centerLatLng,
          offset: { x: 0, y: -20 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      this.infowindow.close();//初始关闭信息窗关闭
      const listall = []
      const listallstyles = {}
      // 遍历 message 数组，为每个位置创建一个标记
      if (e.length > 0) {
        e.forEach(item => {
          // console.error( item)
          let idstyles ='Style'+item.id
          let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
          item.lat = parseFloat(list[0]);
          item.lng = parseFloat(list[1]);
          item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
          const markerLatLng = new TMap.LatLng(item.lat, item.lng);
          const customIconUrl1 = require(item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png'); 
          const customIconUrl2 = require(item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png');
          const customIconUrl3 = require(item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png'); 
          // const customIconUrl1 = item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png'; 
          // const customIconUrl2 = item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png';
          // const customIconUrl3 = item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png';
          const icon =  this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
          // const icon = 'https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/zjjf.png'
          let infoitem = {
            "styleId":idstyles,
            "id": item.id,
            "position": markerLatLng,
            "icon":icon,
            "properties":item
          }
          
          listallstyles[idstyles] = new TMap.MarkerStyle({ 
            "width": 51,  // 点标记样式宽度（像素）
            "height": 52, // 点标记样式高度（像素）
            "src": icon,  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            // "anchor": { x: 16, y: 32 }  
          }) 
          listall.push(infoitem)
        });
        console.error(listallstyles )
        this.marker = new TMap.MultiMarker({
          styles:listallstyles,
          map: this.map,  //指定地图容器
          geometries:listall
        });
        this.marker.on("click", this.showInfoWindow)
      }
    },
    showInfoWindow(event) {
      console.error(event)
      let lat = event.latLng.getLat().toFixed(6);
      let lng = event.latLng.getLng().toFixed(6);
      let item = event.geometry.properties
      // 设置信息窗口的内容
      const content = `
        <div style="padding:10px 0;border-radius: 18px;text-align: left;">
          <p style="">资源名称:${item.name}</p>
          <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
          <p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='0'?'color: #707B86;':item.publishStatus=='1'?'color: #ECAF5C;':item.publishStatus=='2'?'color: #4A77C9;':item.publishStatus=='3'?'color: #E75A46;':item.publishStatus=='4'?'color: #2AB867;':'color: #707B86;'}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p>
          </div>
      `;
      this.infowindow.open(); //打开信息窗
      this.infowindow.setPosition(new TMap.LatLng(lat,lng));//设置信息窗位置
      this.infowindow.setContent(content);//设置信息窗内容
      
      // this.infowindow = new TMap.InfoWindow({
      //   content:content, //信息窗口内容
      //   position:new TMap.LatLng(lat,lng),//显示信息窗口的坐标
      //   map:this.map  
      // });
    }
  }
}
</script>
<style scoped>
.map {
  width: 100%;
  height: 400px;
  
  /* overflow: hidden; */
}
</style>