高德地图渲染问题

Question

地图渲染问题
1.能得到对应的经纬度和二维数组
2.能打印出GDMap不为null
3.渲染报错为：Uncaught TypeError: Cannot read property 'GDMap' of undefined

<template>
  <div class="map">
    <div id="GDMap" v-loading="loading"></div>
  </div>
</template>

<script>
import loadMap from '@/api/loadMap'
export default {
  data () {
    return {
      // 地图实例
      GDMap: null,
      // 加载的一些插件
      plugins: [
        'AMap.OverView',
        'AMap.MouseTool',
        'AMap.PolyEditor',
        'AMap.RectangleEditor',
        'AMap.PlaceSearch',
        'AMap.DistrictLayer',
        'AMap.CustomLayer',
        'AMap.DistrictSearch',
        'AMap.Polygon',
        'AMap.OverlayGroup'
      ],
      key: 'c5eac55551560531336988396dacbf53',
      v: '1.4.14',
      loading: true,
    }
  },
 mounted () {
    loadMap(this.key, this.plugins, this.v)
      .then(AMap => {
        this.GDMap = new AMap.Map('GDMap', {
          zoom: 6,
          center: [116.397428, 39.90923],
          mapStyle: 'amap://styles/dark',
          resizeEnable: true, //监控地图容器尺寸变化
        })
        this.GDMap.on('complete', () => {
          // eslint-disable-next-line no-console
          console.log('地图加载成功')
          this.loading = false
        })
        new AMap.DistrictSearch({
          extensions: 'all',
          subdistrict: 0
        }).search('北京市', function (status, result) {
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
          ];
          // 完整行政区边界坐标点
          var holes = result.districtList[0].boundaries
          var pathArray = [
            outer
          ];
          pathArray.push.apply(pathArray, holes)
          var polygon = new AMap.Polygon({
            pathL: pathArray,
            strokeColor: '#00eeff',
            strokeWeight: 1,
            fillColor: '#71B3ff',
            fillOpacity: 0.5
          });
          polygon.setPath(pathArray);

      // eslint-disable-next-line no-console
      console.log(pathArray, "--PATH--")

      // 渲染地图行政区轮廓 ？ 有问题
      setTimeout(() => {
        this.GDMap.add(polygon)
      }, 10000)
    })
    // eslint-disable-next-line no-console
    console.log(this.GDMap, '--GDMap--')

  })
  .catch(() => {
    // eslint-disable-next-line no-console
    console.log('地图加载失败！')
    this.loading = false
  })
},
  methods: {

  },
}
</script>

<style>
#GDMap {
  width: 1200px;
  height: 500px;
  position: relative;
}
</style>

Answer 1

this指向问题，把search('北京市', function (status, result)这行的这个函数改为箭头函数