风尚云网学百度地图之react中引入百度地图

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

原创最新推荐文章于 2024-06-27 21:30:42 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #react.js #前端 #开发语言

风尚百度地图学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React项目中集成百度地图，包括注册成为开发者、获取密钥、安装React组件库及地图展示的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片引于百度开放平台： 百度地图开放平台 | 百度地图API SDK | 地图开发

首先必须注册了百度地图开发者，有自己的ak，不知道怎么整的，去看上一篇博客

一：首先依旧是百度地图首页

百度地图开放平台 | 百度地图API SDK | 地图开发https://lbsyun.baidu.com/

二：找到开发文档中react开发：

React-BMapGL文档https://lbsyun.baidu.com/solutions/reactBmapDoc

三：开始使用安装地图

引入脚本

首先，需要在你的public/index.html模板页面头部加载百度地图JavaScript API代码，

密钥可去百度地图开放平台官网申请

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

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

npm install react-bmapgl --save

等待安装完成之后，重新启动项目

四：在react中写入地图：

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

class App extends React.Component {
    render() {
        return <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>
    }
}
ReactDOM.render(<App />, document.getElementById('container'));

一切准备就绪，您就创建了一个属于自己的react百度地图项目~

地图控件及工具使用请参考：React-BMapGL文档