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

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>
  )
};
相关推荐
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json