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

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

1.安装依赖

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

2.初始化地图

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>   ) };