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

根据官方文档说明创建一个应用 - 获得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;

由此一个以成都为中心坐标的地图就完成了!