Vue3-使用高德地图，遮罩、自定义图标、点击图标放大、同时获取当地天气

1.进入高德开放平台

高德开放平台 | 高德地图API

2.控制台-我的应用-创建新应用-添加key

点击提交后就会生成Key 

 3.在项目中下载

yarn  add  @amap/amap-jsapi-loader

4.在需要的页面引入

import AMapLoader from "@amap/amap-jsapi-loader";
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from "@vue/reactivity";

5.生成地图,添加遮罩

 经纬度定位查询：经纬度查询定位 拾取坐标系统 经纬度查询地图

const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "申请下来的securityJsCode",
  };
  AMapLoader.load({
    key: "申请下来的key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.ToolBar",
      "AMap.Driving",
      "AMap.Polygon",
      "AMap.DistrictSearch",
      "AMap.Object3D",
      "AMap.Polyline",
      "AMap.Map",
      "AMap.Marker",
      () => {
        map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
        map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
        map.addControl(new AMap.HawkEye()); // 显示缩略图
        map.addControl(new AMap.Geolocation()); // 定位当前位置
        map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
        map.addControl(new AMap.Object3D());
        map.addControl(new AMap.Polyline());
        map.addControl(new AMap.Marker());
      },
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      AMaps.value = AMap;
      var district = new AMap.DistrictSearch(opts);
      district.search("填写地名", function (status, result) {
        const bounds = result.districtList[0].boundaries;
        const mask = []; //遮罩
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }

        map.value = new AMap.Map("container", {
          mask: mask,
          center: ["填写经纬度"],
          viewMode: "3D",//模式
          showLabel: true,
          labelzIndex: 130,
          pitch: 40,
          zoom: 10,
          layers: [
            new AMap.TileLayer.RoadNet({
              //rejectMapMask:true
            }),
            new AMap.TileLayer.Satellite(),
          ],
        });
}
})

6.自定义图标，点击图标放大

//直接写在initMap()中
//maskerList为图标的经纬度,名称,图标数组

        let maskerIn;
        maskerList.forEach((item) => {
          maskerIn = new AMap.Marker({
            position: item.position,
            icon: new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(32, 32),
              // 图标的取图地址
              // image: '../../assets/imgs/map-landmark.png',
              image: item.icon,
              // 图标所用图片大小
              imageSize: new AMap.Size(32, 32),
              // 图标取图偏移量
              imageOffset: new AMap.Pixel(0, 0),
            }),
            offset: new AMap.Pixel(-13, -30),
            label: {
              content: `<div style="background: rgba(7, 7, 7, 0.8)  !important;">${item.name}</div>`,
            },
            map: map.value,
          });
          maskerIn.on("click", (e) => {
            markerClick(e, item.name);
          });
        });
        map.value.add(maskerIn); //添加到地图

//点击放大地图,图标,label
const markerClick = (e, name) => {
  map.value.setZoomAndCenter(11, e.target.getPosition()); // 点击放大
  isOpen.value = true; // 打开dialog
  self.selectedMarkerStore = e.target.getExtData();
  //判断是第否点击过
  if (self.lastClickedMarker) {
    let icon = self.lastClickedMarker.getIcon();
    self.lastClickedMarker.setOffset(new AMap.Pixel(-10, -30));
    self.lastClickedMarker.setIcon(
      new AMap.Icon({
        size: new AMap.Size(32, 32), // 图标尺寸
        image: icon._opts.image, // Icon的图像
        imageSize: new AMap.Size(32, 32),
      })
    );
    self.lastClickedMarker.setLabel({
      content: `<div style="background: rgba(7, 7, 7, 0.8) !important;">${name}</div>`,
    });
  }
  let icon2 = e.target.getIcon();
  console.log(e.target.getTitle());
  e.target.setIcon(
    new AMap.Icon({
      size: new AMap.Size(65, 65), // 图标尺寸
      image: icon2._opts.image, // Icon的图像
      imageSize: new AMap.Size(65, 65),
    })
  );
  e.target.getLabel();
  e.target.setLabel({
    content: `<div  style="line-height:50px; font-size: 19px;
  font-family: Source Han Sans SC-Medium, Source Han Sans SC;
  font-weight: 500; padding: 10px;">${name}</div>`,
  });
  // e.target.setOffset(new AMap.Pixel(-18, -50))
  //有点击就给他加进去这样就能获取上一次数据
  self.lastClickedMarker = e.target;
};

7.获取当地天气

// 获取天气
// 填写需要获取天气的地点名称
const getWeather = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "申请下来的securityJsCode",
  };
  AMapLoader.load({
    key: "申请下来的key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  }).then((AMap) => {
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        //console.log(result.city, "city");
        if (status === "complete" && result.info === "OK") {
          AMap.plugin("AMap.Weather", function () {
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive("填写地名", function (err, data) {
              //console.log("天气", data);
              localStorage.setItem("weather", JSON.stringify(data));
            });
          });
        }
      });
    });
  });
};