react中引入高德地图

最新推荐文章于 2025-08-12 11:04:34 发布

原创最新推荐文章于 2025-08-12 11:04:34 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#地图

react 专栏收录该内容

17 篇文章

订阅专栏

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

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