react中引入高德地图

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

马娟

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

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签：地图

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/96872674

react 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在React项目中引入并使用高德地图API创建地图实例。通过在index.html文件中引入必要的JS资源，并在React组件中定义地图容器，实现地图功能的集成。

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

1.在index.html中引入js

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key='您申请的高德key值'"></script>

2.在要使用的页面
定义const AMap = window.AMap;//必须先这样定义，否则无法直接使用new AMap

import React,{ Component } from 'react'
import './index.less'
const AMap = window.AMap;
var map;
class Map extends Component{
  constructor(props){
    super(props)
    this.state = {
    }
  }
  componentDidMount(){
    map = new AMap.Map('container');//新建地图

  }
  render(){
    const { filterName } = this.state
    return (
        <div className="mapCmp">
            <div id="container"></div> //地图
        </div>
    )
  }
}

export default Map