Mapa de Baidu rc-bmap utilizado en el desarrollo de reacción

    Como una herramienta abierta y gratuita, Baidu Maps se utilizará naturalmente en muchos proyectos que requieren visualización de mapas. El proyecto React es actualmente un marco relativamente activo para el desarrollo front-end. Naturalmente, será necesario combinar escenas de Baidu Maps, y existe tal El marco de mapa de Baidu rc-bmap usado en el proyecto react, solo necesitamos instalarlo a través de npm install rc-bmap --save en el proyecto react para usar.

    Damos un ejemplo simple:

    Primero: cree un proyecto de reacción: create-react-app xxx

    Segundo: ingrese el directorio del proyecto, la instalación depende de npm install rc-bmap --save

    Escriba un control que solo muestre el mapa. 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

     Reaccionar entrada de proyecto 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'))

    Comience el proyecto de reacción: npm start

     

    Cabe señalar que la capa externa de nuestro mapa es un elemento div con id = root. Necesitamos establecer la altura del estilo #root al 100% (#root {height: 100%}), de lo contrario la página no informará un error, pero mire No hay mapa Porque la altura div predeterminada es 0. 

    rc-bmap encapsula las API utilizadas por el mapa, por lo que no necesitamos repetir el control. La documentación en línea sobre rc-bmap está aquí: http://jser.wang/bmap/