react项目中使用高德地图(一)

最新推荐文章于 2025-04-12 09:20:10 发布

原创最新推荐文章于 2025-04-12 09:20:10 发布

· 1.4k 阅读

0 ·

版权

文章标签：

#前端 #react.js

本文介绍了如何依据官方文档创建一个应用，获取必要的key和安全密钥。在页面上设置一个div作为地图容器，并通过React的useEffect和AMap.Map来初始化以成都为中心的地图，设置特定的宽高和级别。

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

根据官方文档说明创建一个应用 - 获得key和安全密钥 - 在页面添加div作为页面容器 - 给容器一个id和指定宽高 - 在页面index文件里引入JSAPI 脚本

在页面指定容器指定宽高引入地图并初始化:

import React, { useEffect, useMemo, useRef, useState } from 'react'

const { AMap } = window

function App(props) {

//初始化地图

const initMap=()=>{

const map = new AMap.Map('container', {

zoom: 11,//级别

center: [104.065735, 30.659462],//中心点坐标

});

}

useEffect(function () {

initMap()

}, [])

return (

<div id="container" style={{width:'100%',height:'800px'}}>

</div>

);

}

export default App;