react开发中使用百度地图rc-bmap

古城微笑少年丶 2023-06-30 14:52 28阅读 0赞

百度地图作为一个开放的免费工具，自然会被使用在很多需要地图展示的项目中，而react项目是目前前端开发相对比较火的框架，自然会有结合百度地图的场景的需要，而真有这么一个在react项目中使用的百度地图框架rc-bmap，我们只需要在react项目中通过npm install rc-bmap --save安装即可使用。

**我们给出一个简单的示例：**

首先：创建react项目：create-react-app xxx

其次：进入项目目录，安装依赖 npm install rc-bmap --save

编写一个控件，只展示地图。App.js

import React from 'react'
    import {Map,Base} from 'rc-bmap'
    const App = ()=>{
    	const {Point} = Base
    	return (
    		<Map ak="YcP5EukTHUoFR3oObxdfBHTfA3EUgHET" zoom={15}>
    			<Point name="center" lng="116.404" lat="39.915" />
    		</Map>
    	)
    }
    
    export default App

react项目入口index.js

import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './components/App'
    import "./index.css"
    ReactDOM.render(
    <App />
    ,document.getElementById('root'))

启动react项目：npm start

![20200118000726897.gif][]

需要注意的是，我们的地图外层是一个id=root的div元素，我们需要设置\#root样式的高度为100%(\#root\{height:100%\})，否则页面启动不会报错，但是看不见地图。因为默认div高度是0。

rc-bmap把地图使用的api都帮助我们封装好了，不需要我们再去重复编写控件。关于rc-bmap的在线文档在这里：[http://jser.wang/bmap/][http_jser.wang_bmap]

[20200118000726897.gif]: https://img-blog.csdnimg.cn/20200118000726897.gif
[http_jser.wang_bmap]: http://jser.wang/bmap/

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API的使用——网页中写入百度地图

我们时常在旅行网站、商城网站等都会有一个定位功能和地图出现！那么我们应该要怎样实现这个功能呢？我们自己去实现一个地图，怎样的解决方式显然是不正确的。往往我们都是通过调用成熟的百

红太狼/ 2024年02月17日 15:44/ 0 赞/ 53 阅读

相关 react开发中使用百度地图rc-bmap

百度地图作为一个开放的免费工具，自然会被使用在很多需要地图展示的项目中，而react项目是目前前端开发相对比较火的框架，自然会有结合百度地图的场景的需要，而真有这么一个

古城微笑少年丶/ 2023年06月30日 14:52/ 0 赞/ 29 阅读

相关 Vue中使用百度地图

首先，看看[官方文档][Link 1]，然后投入使用，先看效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

心已赠人/ 2023年05月22日 04:57/ 0 赞/ 43 阅读

相关 React17 + 百度地图API 渲染地图组件

注册百度地图开发者账号，获取 AK ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

心已赠人/ 2022年10月28日 14:25/ 0 赞/ 262 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 458 阅读

相关 Androida百度地图开发之显示百度地图

前提需要自己获取apikey 如果还不会获取，可参考网址: [http://blog.csdn.net/zhengyikuangge/article/details/

不念不忘少年蓝@/ 2022年09月23日 11:55/ 0 赞/ 424 阅读

相关百度地图开发之定位

本文主要讲述利用百度地图API实现定位功能第一步:下载SDK与申请KEY 参考链接：[Android 百度地图 SDK v3.0.0 （一） - Hongyang

雨点打透心脏的1/2处/ 2022年07月29日 11:50/ 0 赞/ 400 阅读

相关百度地图开发中遇到的问题

问题1：含有label的marker聚合时label消失问题问题描述：使用百度地图API实现marker聚合最简单的方式就是编写如下的代码： <scr

逃离我推掉我的手/ 2022年07月14日 05:49/ 0 赞/ 253 阅读

相关 html页面插入百度谷歌地图,react中插入百度地图

一、百度地图 1、打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html 2、在“1.定位中心

青旅半醒/ 2022年05月21日 05:24/ 0 赞/ 407 阅读

相关 android手机百度地图开发

最近在做android手机上的地图开发，我们选用百度地图进行开发。 1.百度资源下载及参考文档 [http://developer.baidu.com/map/sdk-an

Love The Way You Lie/ 2022年01月21日 00:09/ 0 赞/ 376 阅读