React&百度地图--初步引入

回眸只為那壹抹淺笑 提交于 2019-12-20 03:52:06

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 )

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!