1.创建react项目
npx create-react-app demo3
进入项目目录并运行
cd demo3
npm start
![](https://i-blog.csdnimg.cn/blog_migrate/f17d9e4f98d20eb8d39d4a92286dca5d.png)
打开demo3目录如下
运行如下命令
npm run eject
安装需要的包
npm install
2.进入百度地图api接口官网
开发文档-->javascript API-->demo详情
进入demo详情界面如下
现在打开代码中的html文件,并且引入js库(其中的“我的秘钥”需要替换为自己的,否者不能用,去申请)
这里的AK就是秘钥,替换掉“我的秘钥”四个字
现在app.js代码如下
注意:div的id为allmap而不是class
效果图如下
其中,代码中的经纬度坐标可以通过百度地图提供的接口获取,获取坐标地址
3.定位
现在我们将起点这是为定位点,终点就自己设置
我们看看效果
虽然定位成功了,但是依旧没有将起点设置为定位点
一个很简单的处理方式,就是设置延时。
再看看效果
当然我们同样可以通过生命周期函数解决这个问你题。这个就自己研究吧。