yiliangyiyun-pc/src/components/mapdrag/warehouseReceiptMap.vue

<style lang='scss' scoped>
  .mapContent {
    position: relative;
    height: 95%;
    transition: 0.5s;

    .center-add {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      width: 30px;
      height: 30px;
    }
  }

  #mapContainer {
    width: 100%;
    height: 100%;
  }

  .amap-info-close {
    display: none !important;
  }
</style>

<template>
  <div class="mapContent">
    <div id="mapContainer"></div>
  </div>
</template>

<script>
  import {
    regionData,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  import image from '../../../public/img/ic_locationmarker.jpg'
    import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    data() {
      return {
        map: null,
        marker: null,
        markers: [],
        zoomEnable: true,
        dragEnable: true,
        status: true,
      }
    },
    props: [
      'listData'
    ],
    computed: {},
    watch: {
      listData: function(val1, val2) {
        this.listData = val1
        var that = this
        
        this.map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          zoom: 5,
          center: [103.809074, 36.051121],
          zoomEnable: this.zoomEnable,
          dragEnable: this.dragEnable
        })
        this.loadmap()
      }
    },
    async created() {
      // AMapLoader.reset();
      if (window.AMap && window.AMapUI) {
        // 未载入高德地图API，则先载入API再初始化
      } else {
        // await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}&plugin=AMap.AutoComplete`)
        // await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
        //  AMapLoader.reset();
        AMapLoader.load({
          "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
          "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch','AMap.Geolocation', 'Geolocation'],
          "Loca": { // 是否加载 Loca， 缺省不加载
            "version": '2.0.0' // Loca 版本，缺省 1.3.2
          },
        }).then((AMap) => {
        })
      }
    },
    mounted() {},
    methods: {
      makeMarkersList() {
        let _list = this.listData
        for (let i = 0; i < _list.length; i++) {
          _list[i].marker = []
          _list[i].marker.push(_list[i].warehousePositioning.split(',')[1])
          _list[i].marker.push(_list[i].warehousePositioning.split(',')[0])
        }
      },
      loadmap(val) {
        let that = this
        //构造markersList
        AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function() {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true, // 设置定位超时时间，默认：无穷大
            timeout: 10000, // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20), // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true, // 定位按钮的排放位置, RB表示右下
            buttonPosition: 'RB'
          })
          geolocation.getCurrentPosition()
          geolocation.on( 'complete', e => {
            console.log(e) // 定位成功之后做的事 // 定位成功之后再定位处添加一个marker
            var infoWindow = new AMap.InfoWindow({
              offset: new AMap.Pixel(0, -30)
            })

            function infoOpen(e) {
              infoWindow.setContent(e.target.content)
              infoWindow.open(that.map, e.target.getPosition())
            }

            function infoClose(e) {
              infoWindow.close(that.map, e.target.getPosition())
            }

            function toGetList(e) {
              // console.log(e.target.getExtData())

              that.$parent.getList(e.target.getExtData().id, 1)
            }
            for (let i = 0; i < that.listData.length; i++) {
              var marker = new AMap.Marker({
                map: that.map,
                position: that.listData[i]
                  .marker, // marker最终显示在那个点上，
                icon: new AMap.Icon({
                  image: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/home_pic.png",
                  size: new AMap.Size(20, 20), //图标大小
                  imageSize: new AMap.Size(20, 20),
                }),
              })

              marker.setExtData({
                'id': that.listData[i].warehouseName
              })
              let _cwList = '<div class="cw-wrap">'
              for (let k = 0; k < that.listData[i].tradeWarehouseReceiptAppls.length; k++) {
                let _k = that.listData[i].tradeWarehouseReceiptAppls[k]
                _cwList += '<div style="display:flex">' +
                  '<div style="margin:10px 20px">' + _k.warehouseNo + '仓位</div>' +
                  '<div style="margin:10px 20px">' + _k.goodsName + '</div>' +
                  '<div style="margin:10px 20px">' + _k.weight + '</div>' +
                  '</div>'
              }
              _cwList = _cwList + '</div>'
              console.log('地图仓位数据', _cwList)
              marker.content = '<div style="display:flex;justify-content: center">' + that.listData[i]
                .warehouseName + '</div>' + _cwList + '</div>'
              marker.on('mouseover', infoOpen)
              marker.on('mouseout', infoClose)
              marker.on('click', toGetList)
              // 设置label标签
              // label默认蓝框白底左上角显示，样式className为：amap-marker-label
              // marker.setLabel({
              //     offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
              //     content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
              //     direction: 'right' //设置文本标注方位
              // });
            }
          })
           geolocation.on( 'error', e => {
            console.log(e) // 定位失败
          })
        })
      }
    }
  }
</script>