vue引入高德地图，刚进入页面的时候会闪一下(红色)，只在加载第一次的时候出现

Question

初始化加载高德地图

mounted有来了一次，不来一次 AMapUI.loadUI会报undefinded

第一次，点击页面会先红色闪一下，1s后就正常了，什么原因呢

出现地图的代码：

toSingleAdress: function (val) {
        gtag('config', GTAG_ID, {
          'page_title': '单地址详情页',
          'page_path': '/addressDetail'
        })
        let _this = this
        this.upperLevel = this.pageDepth
        this.pageDepth = 2
        this.$nextTick(function () {
          // 操作地图移动、缩放时 阻止浏览器橡皮筋效果
          document.getElementById('address-map').addEventListener('touchmove', function (e) {
            e.preventDefault()
          }, {passive: false})
          this.addressMap = new AMap.Map('address-map')
          this.addressListData.AddressGroups.forEach(function (item) {
            if (item.DeliveryAddress === val) _this.singleAddressData = item
          })
          this.renderAddressMap()
        })
      },
       renderAddressMap: function () {
    let _this = this
    // 点标记
    AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
      // 通过计算得到 余量中最早的 containerId
      let currentContainerId = null
      if (_this.singleAddressData.AddressContainersEst.length === 2) {
        if (moment(_this.singleAddressData.AddressContainersEst[0].AmapEstDeliveriedTime) < moment(_this.singleAddressData.AddressContainersEst[1].AmapEstDeliveriedTime)) {
          currentContainerId = _this.singleAddressData.AddressContainersEst[0].ContainerId
        } else {
          currentContainerId = _this.singleAddressData.AddressContainersEst[1].ContainerId
        }
      } else if (_this.singleAddressData.AddressContainersEst.length === 1) {
        currentContainerId = _this.singleAddressData.AddressContainersEst[0].ContainerId
      }
      // 起点
      let OriginalCoordinate = _this.singleAddressData.OriginalCoordinate
      // 终点
      let DestinationCoordinate = _this.singleAddressData.DestinationCoordinate

      function _createMarker (style, position) {
        new SimpleMarker({
          iconTheme: 'numv1',
          iconStyle: style,
          map: _this.addressMap,
          position: position
        })
      }

      if (OriginalCoordinate) _createMarker('start', OriginalCoordinate)
      if (DestinationCoordinate) _createMarker('end', DestinationCoordinate)
      // render point
      _this.singleAddressData.AddressContainersAll.forEach(function (item, index) {
        if (item.Coordinate && item.Status !== '已送达') {
          new SimpleMarker({
            iconLabel: {
              style: {color: '#fff', lineHeight: '25px', fontSize: '12px'}
            },
            iconTheme: 'numv1',
            iconStyle: 'blue',
            map: _this.addressMap,
            position: item.Coordinate,
            label: {
              content: currentContainerId === item.ContainerId ? '<div>预计' + _this.timeConversion(item.AmapEstDeliveriedTime) + '送达</div><div>余量中最早</div>' : '',
              offset: new AMap.Pixel(-75, 45)
            }
          }).on('click', function () {
            _this.toSingleContainer(item.ContainerId)
          })
        }
      })
      _this.addressMap.setFitView()
    })
  },

综上2个问题：
1.为什么要加载2次高德地图，不然AMapUI是null
2.为什么会红色闪一下

Answer 1

首先是否能提供一个可以重现的示例，在 https://codepen.io/jasonamart... 上面可以直接展示。

1. 加载两次的原因猜测是因为第一次的init回调没有调用到，可以直接createScript两个js。

也可以参考http://vue-gaode.rxshc.com/的用法。

1. 红色闪一下的问题

这个从提供的信息没看出问题，猜测是SimpleMarker可能有什么需要设置的，也可以关注下控制台是否有报错。如果提供了可重现的地址是最好的排查方式。

Answer 2

参考地图引入：https://liubing.me/vue-gaode-...