如何在react项目中引入百度地图

最近在用react做一个项目,需要使用到地图展示地址,由于之前就有用过百度地图,申请过ak,所以这次就直接用百度地图了。但是之前是使用vue,react怎么使用百度地图还是第一次,特此记录,以备有需要的人。

本文首发于本人的个人博客:https://jilezhainanshe.com/posts/4516e45d/ 未经授权,禁止转载。

首先去百度地图开放平台申请应用AK,这里就不详细描述了,有百度账号的直接去官网创建一个应用就有AK了,百度地图开放平台地址:http://lbsyun.baidu.com。

首先需要在项目中的index.html文件中引入百度地图js链接,我在项目中找了半天,居然没发现index.html模板文件,后来我去翻了umi文档,在HTML模板中找到这么一句话:

原来是要自己新建模板文件啊,我立马按照文档方法在pages下面新建了一个模板文件,然后把百度地图js链接引入了进去:

ak = 后面填你的应用ak秘钥

然后就可以在项目中愉快的玩耍了:

注意事项:这里并不使用import方式来导入BMap,而是使用window.BMap来获取地图实例。

react是模块化开发,如果不是以import方式引入进来的话,会报错为BMap is undefined,但是放在window对象上是可以取得到的,刷新一下页面,在控制台中输入BMap是能够获取到,输入window发现BMap对象已经挂载到上面。

好了这样就大功告成了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章