fxc_desktop/src/components/fangxincha/map.vue

<template>
  <div class="mappage_con" id="mapCon"></div>
</template>
<script>
  import remoteLoad from '@/utils/remoteLoad.js'
  import icon1 from '@/assets/images/fxc_img6.png'
  import icon2 from '@/assets/images/fxc_img7.png'
  import icon3 from '@/assets/images/fxc_img8.png'
  import { getEvvmListOffice } from '@/api/screen'
  
  export default({
    name:"MapPage",
    props: {
      markers: Array
    },
    data () {
      return {
        list:[],
      }
    },
    watch: {
      markers(nv,ov){
        var list = nv
        this.list = list
        this.setMarkers(list)
      },
    },
    async mounted () {
      var MapKey = this.MapKey
      // 已载入高德地图API，则直接初始化地图
      if (window.AMap && window.AMapUI) {
        this.initMap()
      // 未载入高德地图API，则先载入API再初始化
      } else {
        await remoteLoad(`http://webapi.amap.com/maps?v=1.4.15&key=${MapKey}`)
        await remoteLoad(`https://webapi.amap.com/ui/1.1/main.js`)
        // await remoteLoad(`https://a.amap.com/Loca/static/loca-v2/demos/mock_data/events.js`)
        this.initMap()
      }
    },
    methods: {
      // getList(){
      //   getEvvmListOffice().then(response => {
      //     var list = response.data
      //     this.setMarkers(list)
      //   });
      // },
      getInfo(id){
        this.$parent.getChainInfo(id)
        this.$parent.getChainTemperature(id)
      },
      initMap () {
        let AMap = this.AMap = window.AMap
        let mapConfig = {
          zoom: 5,
          mapStyle: 'amap://styles/darkblue',
          viewMode:'3D',
          pitch:45,
          rotation:10,
          center:[109.591091,33.096726],
          // showLabel: false //不显示地图文字标记
        }
        let map = this.map = new AMap.Map('mapCon', mapConfig)
        // 添加 3D 罗盘控制
        AMap.plugin([
          'AMap.ControlBar',
        ], function(){
          map.addControl(new AMap.ControlBar());
        })
        // this.getList()
      },
      setMarkers(list){
        var that = this
        this.map.clearMap()// 清除地图上所有添加的覆盖物
        var markers = []
        for(var i in list){
          if(list[i].lng && list[i].lat){
            let marker = new AMap.Marker({
              position: new AMap.LngLat(list[i].lng,list[i].lat),  
              //title: list[i].NAME + '<br>' + list[i].address,
              //offset: new AMap.Pixel(-20,43),//偏移量，默认以marker左上角位置为基准点
              icon:new AMap.Icon({
                  size: new AMap.Size(45,45),    // 图标尺寸
                  image: require('@/assets/images/index_icon_'+list[i].transportType+list[i].status+'.png'),//[icon1,icon2,icon3][list[i].type],  // Icon的图像
                  // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                  imageSize: new AMap.Size(45, 45)   // 根据所设置的大小拉伸或压缩图片
              }),
              clickable:true,
              extData:list[i],
            });
            marker.on("click",function(e){
              var extData = e.target.De.extData
              var id = extData.id
              that.getInfo(id)
            })
            markers.push(marker)
          }
        }
        this.map.add(markers)
      },
    }
  })
</script>
<style>
  .mappage_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
  .mappage_con .amap-marker-label{background: rgba(35,4,194,0.6);font-size: 0.8vw; border: 1px solid #51FFFF; color: #ffffff; border-radius: 5px;}
  .amap-logo{ display: none!important;;}
</style>