react中调用百度地图

1.创建react项目

npx create-react-app demo3

进入项目目录并运行

cd demo3

npm start

打开demo3目录如下

运行如下命令

npm run eject

安装需要的包

npm install

2.进入百度地图api接口官网

开发文档-->javascript API-->demo详情

进入demo详情界面如下

现在打开代码中的html文件，并且引入js库（其中的“我的秘钥”需要替换为自己的，否者不能用，去申请）

这里的AK就是秘钥，替换掉“我的秘钥”四个字

现在app.js代码如下

注意：div的id为allmap而不是class

效果图如下

其中，代码中的经纬度坐标可以通过百度地图提供的接口获取，获取坐标地址

3.定位

现在我们将起点这是为定位点，终点就自己设置

我们看看效果

虽然定位成功了，但是依旧没有将起点设置为定位点

一个很简单的处理方式，就是设置延时。

再看看效果

当然我们同样可以通过生命周期函数解决这个问你题。这个就自己研究吧。