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>
  )
};
相关推荐
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder8 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript