如何在react项目中引入百度地图
最近在用react做一个项目,需要使用到地图展示地址,由于之前就有用过百度地图,申请过ak,所以这次就直接用百度地图了。但是之前是使用vue,react怎么使用百度地图还是第一次,特此记录,以备有需要的人。本文首发于本人的个人博客:https://jilezhainanshe.com/posts/4516e45d/ 未经授权,禁止转载。首先去百度地图开放平台申请应用AK,这里就不详细描...
最近在用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对象已经挂载到上面。
好了这样就大功告成了。
更多推荐
所有评论(0)