Vue3使用高德地图api

~~~~省略去高德申请key的步骤

1.npm安装

npm i @amap/amap-jsapi-loader --save

组件中引入：

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

<template>
    <div id="mapContainer"></div>
</template>

(window as any)._AMapSecurityConfig = {
  securityJsCode: “你申请的安全密钥”,
};

function initMap() {
  AMapLoader.load({
    key: "你的key", // key是必须的
    version: "2.0",
    plugins: [
      "AMap.DistrictSearch",
      "AMap.DistrictExplorer",
      "AMap.Pixel",
      "AMap.Text",
      "AMap.Marker",
      "AMap.BezierCurve",
      "AMap.GeoJSON",
      "AMap.SecurityConfig",
      "AMap.Gradient",
    ],
  }).then((AMap: any) => {
    aMap = AMap;
    map = new AMap.Map("mapContainer", {
      viewMode: "3D", //地图是否开启3D
      center: [120.592, 29.845], //初始化地图中心点位置、
      zoom: 9.5,
      pitch: 45,
      zooms: [9.5, 20],
    });
    // 其他操作 参考高德API官网

   // 还可在高德中调取当地的天气
   // 获取当前城市的天气
    AMap.plugin("AMap.CitySearch", function () {
      let citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status: any, result: any) {
        if (status === "complete" && result.info === "OK") {
          AMap.plugin("AMap.Weather", function () {
            let weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive(result.city, function (err: any, data: any) {
              console.log(data);//天气对象
            });
          });
        }
      });
    });
  });
}

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

onUnmounted(() => {
  //销毁地图
  map.destroy();
});


#mapContainer {
  width: 600px;
  height: 600px;
}