react中引入高德地图

react中引入高德地图

我们在上几篇的文章中更新了vue nuxt项目使用高德地图教程， 今天我们更新一下在react中如何引入高德地图并使用，今天介绍的是直接引入的方法，步骤如下：

第一步：高德地图官网新建项目获取key

注册高德地图–> 控制台—>应用管理—>创建新应用：（如图所示）

新建完成后就可以得到一个key，下面会用到

第二步： 在index.html 引入key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=【你的key】&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.LabelMarker,AMap.Autocomplete,AMap.ToolBar,AMap.PlaceSearch,AMap.Heatmap,AMap.Geocoder"></script>

const AMap = window.AMap;

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rmap: null,
    }
  }
  // 组建挂载之后执行
  componentDidMount() {
    // 初始化地图
    this.rmap = new AMap.Map('container', {
      zoom: 1
    });

  }
  // 组建将要卸载的时候执行
  componentWillUnmount(){
    // 释放地图
    this.rmap && this.rmap.destory();
  }

页面容器展示，大小自己设置

<div className="mapCmp">
    <div id="container" style={{ width:"300px", height:"200px" }}></div>
</div>

操作到这里就可以看到一个初始化好的地图了。

也可以采用amap 引入， npm 安装使用， 下一篇来介绍吧。

更多关于高德地图使用的文章：

高德地图批量逆地址解析 源码

高德地图实现批量地址解析，多个地理解析，批量地址转坐标经纬度

JS vue下 实现高德地图定位，获取当前经纬度，添加marker

vue nuxt项目使用高德地图教程

持续更新，欢迎收藏！