react如何使用百度地图

最新推荐文章于 2024-06-27 21:30:42 发布

程序员里的小仙女

最新推荐文章于 2024-06-27 21:30:42 发布

阅读量1k

点赞数 2

文章标签： react.js 百度 react native

本文链接：https://blog.csdn.net/weixin_48709977/article/details/122462009

版权

使用百度地图之前，我们需要提前做好准备工作：先注册好百度地图，然后就开始

找到并打开开发文档
在这里插入图片描述
进入React-BMapGL

打开后React-BMapGL的页面

在public中的index.html引入脚本，填入自己的密钥

//您的密钥中 填入自己的密钥
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

2.使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --S

在这里插入图片描述
3.导入组件

import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';

4.使用组件

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
            <Marker position={{lng: 116.402544, lat: 39.928216}} />
            <NavigationControl /> 
            <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
        </Map>

到这地图都可以显示了，如果想要做各种功能，可以在api中查找使用
api链接
在这里插入图片描述