高德地图在 vue3 中的使用

高德地图在 vue 中的使用

• 下载依赖

npm install @amap/amap-jsapi-loader

• 创建 amap.js 文件，导入依赖注册地图

import AMapLoader from "@amap/amap-jsapi-loader";

const aMap = () => {
  return AMapLoader.load({
    key: "使用自己的key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.DistrictSearch",
      "AMap.Weather",
      "AMap.Geocoder",
      "AMap.Marker",
    ],
    Loca: {
      // 是否加载 Loca， 缺省不加载
      version: "2.0.0", // Loca 版本，缺省 1.3.2
    },
  });
};

export default aMap;

• 在 vue 文件中使用

import aMap from "@/assets/js/amap";

// 地图初始化
async function mapInit() {
  await aMap().then((AMap) => {
    map = new AMap.Map("map", {
      center: [121.734942, 31.086444],
      zoom: 12.2,
      pitch: 40,
      mapStyle: "amap://styles/blue", //地图模式
      viewMode: "3D", //开启3D地图
    });
  });
}

<div id="map"></div>

#map {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  font-size: 16px;
  transform: translate3d(0, 0, 0);
}