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.15plugins: [], // 需要使用的的插件列表，如比例尺'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>)
};