React 基础调用高德地图版

最新推荐文章于 2025-04-06 10:30:57 发布

机器猫~！

最新推荐文章于 2025-04-06 10:30:57 发布

阅读量394

点赞数

文章标签： react.js arcgis 前端

本文链接：https://blog.youkuaiyun.com/weixin_65451509/article/details/133148133

版权

本文详细介绍了如何在React项目中使用`amap-jsapi-loader`下载并集成AMAPJavaScriptAPI，创建MapContainer.js和CSS文件，设置地图容器样式，并展示了React类组件和函数组件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载 npm i @amap/amap-jsapi-loader --save

npm i @amap/amap-jsapi-loader --save

新建 MapContainer.js 文件

在项目中新建 MapContainer.js 文件，用作地图组件脚本。（可以自己定义文件）

新建 MapContainer.css 文件

在项目中新建 MapContainer.css 文件，用作地图组件样式。（可以自己定义文件）

设置地图容器样式

在 MapContainer.css样式文件中设置地图容器样式

.container{
  padding: 0px;
  margin: 0px;
  width: 100%;
}

引入 JS API Loader

在 MapContainer.js脚本文件中引入 amap-jsapi-loader依赖

import AMapLoader from '@amap/amap-jsapi-loader';

React类组件的形式完整代码

import React, { Component } from 'react';
import styles from "./MapContainer.css";
import AMapLoader from '@amap/amap-jsapi-loader';

class  MapComponent extends Component{
  constructor(){
    super();      
    this.map = null;
  }
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount(){
    AMapLoader.load({
      key:"",                     // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins:[''],               // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{ //设置地图容器id
        viewMode:"3D",         //是否为3D地图模式
        zoom:5,                //初始化地图级别
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  }
  render(){
      // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
      return (
        <div id="container" className={styles.container} style={{ height: '800px' }} > 
        </div>
    );
  }
}
//导出地图组建类
export default MapComponent;

函数组件完整代码

import { useEffect } from "react";
import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer() {
  let map = null;

  useEffect(() => {
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div
      id="container"
      className={styles.container}
      style={{ height: "800px" }}
    ></div>
  );
}

以上只是最基础的代码