反応開発で使用されるBaiduマップrc-bmap

    Baidu Mapsはオープンで無料のツールであるため、マップの表示を必要とする多くのプロジェクトで当然使用されます。Reactプロジェクトは現在、フロントエンド開発の比較的ホットなフレームワークです。当然、Baidu Mapsのシーンを組み合わせる必要があり、実際にそのようなものがあります。 Baiduマップフレームワークrc-bmapはreactプロジェクトで使用され、npm install rc-bmap --saveからreactプロジェクトにインストールするだけで済みます。

    簡単な例を示します。

    最初に、reactプロジェクトを作成します。create-react-appxxx

    2番目：プロジェクトディレクトリを入力します。インストールはnpm install rc-bmap --saveに依存します

    マップのみを表示するコントロールを記述します。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

     Reactプロジェクトエントリ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'))

    反応プロジェクトを開始します：npm start

     

    マップの外側のレイヤーはid = rootのdiv要素であることに注意してください。＃rootスタイルの高さを100％（#root {height：100％}）に設定する必要があります。そうしないと、ページはエラーを報告しませんが、地図なし。デフォルトのdivの高さは0だからです。 

    rc-bmapはマップで使用されるAPIをカプセル化するため、コントロールを繰り返す必要はありません。rc-bmapに関するオンラインドキュメントはこちら：http ://jser.wang/bmap/