React&百度地图--初步引入_rc-bmap-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42260975/article/details/103611932

本文介绍了如何在React项目中初步引入并使用rc-bmap组件，这是一个基于React封装的百度地图组件。通过介绍安装步骤和可能遇到的问题，帮助开发者解决在集成过程中遇到的模块缺失问题。

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

React&百度地图–初步引入

rc-bmap 是一个基于React封转的百度地图组件
地址：http://jser.wang/bmap/articles/start

一、安装

npm install --save rc-bmap  或者 
yarn add rc-bmap #  或者
cnpm install --save rc-bmap
（本人前两种方法安装都未成功，第三个好使/(ㄒoㄒ)/~~）

安装完成后，可以在package.json文件中查看到相应配置，如图所示：
在这里插入图片描述

二、用法

import React from 'react';
import {
    Map,
    Base,
} from 'rc-bmap';

const { Point } = Base;

class DistributorMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <div className="distributormap" style={{ height: '100vh' }}>
                <Map
                    ak="swgv8AGGAKfvQ0LONmtM13luEzFbi723"(需要自己申请)
                    scrollWheelZoom
                    zoom={16}
                >
                    <Point name="center" lng="116.332782" lat="40.007978" />
                </Map>
            </div>
        )
    }
}

export default DistributorMap

三、Other Question
在安装rc-bmap的过程中，几次安装后再启动num run dev命令导致项目运行不起来，报错：Cannot find module ‘ms’……，安装ms也不曾管用(命令：cnpm install ms --save-dev )，此时，我们需要将node_modules删除掉，再重新安装即可(命令安装：cnpm install )