react-amap 是一個(gè)基于 React 封裝的高德地圖組件；幫助你輕松的接入地圖到 React 項(xiàng)目中。除了必須引用的 Map 組件外，我們目前提供了最常用的 10 個(gè)地圖組件，能滿足大部分簡(jiǎn)單的業(yè)務(wù)場(chǎng)景；如果你有更復(fù)雜的需求，或者覺(jué)得默認(rèn)提供的組件功能不夠，你完全可以自定義一個(gè)地圖組件，然后根據(jù)高德原生 API 做高德允許你做的一切事情。
最近更新
react-amap 升級(jí)到 1.1.1，支持加載 AMapUI 組件庫(kù)。加載方式參考 Map 組件 關(guān)于 加載 AMapUI 組件庫(kù) 的說(shuō)明。
擴(kuò)展組件
從版本 1.0.0 開始，react-amap 擁有了組件的擴(kuò)展能力。如果 react-amap 中已有的組件不能滿足你的業(yè)務(wù)需求，你可以使用自己寫的地圖組件；
在你的組件中，可以通過(guò) props 訪問(wèn)到創(chuàng)建好的高德地圖實(shí)例，以及地圖的 div 容器；擁有訪問(wèn)這兩個(gè)屬性的能力后，你可以根據(jù)高德原生 API 做高德允許你做的一切事情。實(shí)際上，react-amap 中的其他組件就是這么做的。文檔內(nèi)容請(qǐng)參考自定義地圖組件。
如何在項(xiàng)目中接入 react-amap
安裝
npm install --save react-amap
npm 用法
<div id="app"></div>
#app {
width: 600px;
height: 400px;
}
import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap';
ReactDOM.render(
<Map amapkey={YOUR_AMAP_KEY} version={VERSION} />,
document.querySelector('#app')
)
amapkey 說(shuō)明見下文 version 指定高德地圖版本 不填則使用默認(rèn)值: 1.4.0
也可以手工引入你需要的組件：
import Map from 'react-amap/lib/map';
import Marker from 'react-amap/lib/marker';
// ... your other code
以上為簡(jiǎn)單場(chǎng)景的應(yīng)用。 tips: Map 組件的父元素須設(shè)置高度和寬度；關(guān)于代碼中的 Map 組件的 amapkey 屬性見下方的說(shuō)明。
關(guān)于 Key
在上面的例子中需要給 Map 組件傳入 amapkey 屬性，這個(gè)是高德地圖給開發(fā)者分配的開發(fā)者 Key；你可以在高德開放平臺(tái)申請(qǐng)你自己的 Key。
在 react-amap 中 Key 的傳入方式有兩種:
- 給 Map 組件傳入
amapkey屬性（因?yàn)?React 框架本身對(duì)key屬性有其他作用，所以不能用key，所以我們用amapkey），這樣的缺點(diǎn)是如果多個(gè)地方使用就要每次都要傳入； - 你也可以定義一個(gè)純組件,把 Map 組件的 amapkey 屬性寫好后返回新組件。
- 直接把你的 Key 定義在全局變量
window.amapkey上，react-amap 在調(diào)用高德接口時(shí)會(huì)嘗試從這里讀取。（不推薦）
組件的使用請(qǐng)移步組件文檔。
