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