React&百度地图

介绍

初衷

rc-bmap 源于一次业务对百度地图相关的需求，由于前端技术栈使用的是 React，官方仅提供了最基础的 js，使用起来很不 React。现有 github 中的 React 版百度地图方式无法满足需求，所以决定来一次愉快的封装。

起步

WARNING

在开始之前，希望您对React与百度地图已经有了一定的了解

import React from "react";
import { render } from "react-dom";
import { Map } from "rc-bmap";

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" />,
  document.getElementById("app")
);

注意：

  1. 在使用时，您需要自行替换您自己在百度所申请的 AK 值，目前 AK 仅作 demo 示例使用。
  2. 此处，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;

感兴趣吗？

如果你对以上内容兴趣，那么请继续往下浏览各组件的使用方法吧。

← 地图 →