vue3接入高德地图(AMAP)

前言

本文记录在 Vue3 项目中集成高德地图（AMAP），并调用搜索地点服务。

设置地图与搜索服务

下面示例包含地图初始化与请求“医院/诊所”数据的逻辑。

import axios from "axios";
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;
const loading = ref(false);

const getHospital = async () => {
  loading.value = true;
  let hospitalList = [];
  let clinicList = [];
  let page = 1;

  while (true) {
    const { data: res } = await axios.get(
      `https://restapi.amap.com/v3/place/text?keywords=医院&city=430100&offset=50&page=${page}&key=1c75af4f449f301bacd944e0a9855dae&extensions=all`
    );
    hospitalList = hospitalList.concat(res.pois);
    page++;
    if (res.pois.length < 50) {
      break;
    }
  }

  page = 1;
  while (true) {
    const { data: res } = await axios.get(
      `https://restapi.amap.com/v3/place/text?keywords=诊所&city=430100&offset=50&page=${page}&key=1c75af4f449f301bacd944e0a9855dae&extensions=all`
    );
    clinicList = clinicList.concat(res.pois);
    page++;
    if (res.pois.length < 50) {
      break;
    }
  }

  loading.value = false;
  return [hospitalList, clinicList];
};

const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "25304e4dd58635d7b98eaafe0f58e786", // 申请好的 Web 端开发者 Key
    version: "2.0",
    plugins: [],
  });

  map = new AMap.Map("container", {
    viewMode: "3D",
    zoom: 11,
    center: [116.397428, 39.90923],
  });

  // await getHospital();
};

onMounted(async () => {
  await initMap();
});

onUnmounted(() => {
  map?.destroy();
});

页面结构与样式

<div id="container"></div>

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