vue 获取数据后再加载高德地图

在Vue中获取数据后再加载高德地图，可以使用Vue的生命周期钩子函数来实现。

首先，在Vue的created钩子函数中获取数据，可以使用axios或其他方法发送异步请求获取数据，例如：

created() {
  axios.get('/api/data')
    .then(response => {
      this.data = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

然后，在data中定义一个变量来保存获取的数据：

data() {
  return {
    data: null
  };
}

接着，在mounted钩子函数中加载高德地图。由于高德地图的加载是异步的，需要使用回调函数来处理加载完成后的逻辑，例如：

mounted() {
  window.initMap = () => {
    // 高德地图加载完成后的逻辑
    // 使用this.data来操作获取到的数据
  };

  const script = document.createElement('script');
  script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY&callback=initMap';
  script.async = true;
  script.defer = true;
  document.body.appendChild(script);
}

其中，YOUR_API_KEY需要替换为你申请到的高德地图API的密钥。

最后，在组件的模板中，可以根据获取到的数据来渲染地图的相关内容，例如：

<template>
  <div>
    <!-- 使用this.data来渲染地图相关内容 -->
  </div>
</template>

这样，当组件加载完成后，会先获取数据，然后再加载高德地图，并在地图加载完成后处理获取到的数据