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;//必须先这样定义,否则无法直接使用new AMap


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项目使用高德地图教程

 

持续更新,欢迎收藏!

未经允许不得转载:小月博客 » react中引入高德地图
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏