介绍
初衷
rc-bmap 源于一次业务对百度地图相关的需求,由于前端技术栈使用的是 React,官方仅提供了最基础的 js,使用起来很不 React。现有 github 中的 React 版百度地图方式无法满足需求,所以决定来一次愉快的封装。
起步
import React from "react";
import { render } from "react-dom";
import { Map } from "rc-bmap";
render(
<Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" />,
document.getElementById("app")
);
注意:
- 在使用时,您需要自行替换您自己在百度所申请的 AK 值,目前 AK 仅作 demo 示例使用。
- 此处,div#app 的高度与宽度均为 100%,若无相关高度定义时,百度地图将渲染在一个高度为 0 的容器中。
添加控件
import React from "react";
import { render } from "react-dom";
import { Map, Navigation } from "rc-bmap";
render(
<Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv">
{/* 在Map中添加控件 */}
<Navigation />
</Map>,
document.getElementById("app")
);
添加覆盖物
import React from "react";
import { render } from "react-dom";
import { Map, Marker } from "rc-bmap";
const markerPoint = {
lng: 116.404,
lat: 39.915
};
render(
<Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv">
{/* 在Map中添加覆盖物 */}
<Marker point={markerPoint} />
</Map>,
document.getElementById("app")
);
自定义控件与自定义覆盖物
在这里,我们为您提供了两个基础类,分别为Control
与Overlay
,您可以通过继承后,实现render
方法即可呈现。
您自定义的控件与覆盖物,均可使用其父类的属性、事件、方法,与此同时,还为您提供了state
与setState
这对基友,方便您在内部通过更改状态即可完成对视图的重新渲染。
自定义控件
import React from "react";
import { ReactComponent, Control } from "rc-bmap";
@ReactComponent
class CustomControl extends Control {
render() {
return <div>这是一个自定义控件</div>;
}
}
export default CustomControl;
自定义覆盖物
import React from "react";
import { ReactComponent, Overlay } from "rc-bmap";
@ReactComponent
class CustomOverlay extends Overlay {
render() {
return <div>这是一个自定义覆盖物</div>;
}
}
export default CustomOverlay;
感兴趣吗?
如果你对以上内容兴趣,那么请继续往下浏览各组件的使用方法吧。