react引入高德地图并初始化卫星地图

小川zs2024-08-03 18:02

react引入高德地图并初始化卫星地图

1.安装依赖

shell 复制代码

yarn add react-amap @amap/amap-jsapi-loader

2.初始化地图

js 复制代码

import AMapLoader from "@amap/amap-jsapi-loader";
import { FC, useEffect, useRef, useState } from "react";

const HomeRight = () => {
  const mymap: any = useRef(null);

  useEffect(()=>{
    AMapLoader.load({
      key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(initMap)
      .catch((e: any) => {
        console.log(e);
      });

    return () => {
      mymap.current.destroy();
    };
  },[])

  /**
   * 加载插件并初始化地图
   */
  const initMap = () => {
    // 1.加载插件
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.HawkEye",
        "AMap.ControlBar",
        "AMap.MapType",
        "AMap.Geolocation",
        "AMap.ContextMenu",
        "AMap.AutoComplete",
        "AMap.PlaceSearch",
      ],
      function () {
        // 创建卫星图图层对象
        const satelliteLayer = new AMap.TileLayer.Satellite();
        // 2.初始化地图实例
        const map = new AMap.Map("myMap", {
          resizeEnable: true,
          expandZoomRange: true, // 放大缩小限制
          zooms: [4, 20], // 放大缩小范围
          center: [116.397428, 39.90923], // 中心点
          layers: [satelliteLayer], // 卫星图类型
          zoom: 5, // 默认缩放级别
        });
        mymap.current = map;
      }
    );
  };

  return (
    <div id="myMap" style={{ width: "100%", height: "100%" }}></div>
  )
};