react-amap 是一個基于 React 封裝的高德地圖組件；幫助你輕松的接入地圖到 React 項目中冒晰。除了必須引用的 Map 組件外掌动，我們目前提供了最常用的 10 個地圖組件盗蟆，能滿足大部分簡單的業(yè)務場景锭硼；如果你有更復雜的需求，或者覺得默認提供的組件功能不夠耸序，你完全可以自定義一個地圖組件忍些，然后根據高德原生 API 做高德允許你做的一切事情。
最近更新
react-amap 升級到 1.1.1坎怪，支持加載 AMapUI 組件庫罢坝。加載方式參考 Map 組件 關于 加載 AMapUI 組件庫 的說明。
擴展組件
從版本 1.0.0 開始搅窿，react-amap 擁有了組件的擴展能力嘁酿。如果 react-amap 中已有的組件不能滿足你的業(yè)務需求，你可以使用自己寫的地圖組件男应；
在你的組件中闹司，可以通過 props 訪問到創(chuàng)建好的高德地圖實例，以及地圖的 div 容器沐飘；擁有訪問這兩個屬性的能力后游桩，你可以根據高德原生 API 做高德允許你做的一切事情牲迫。實際上，react-amap 中的其他組件就是這么做的借卧。文檔內容請參考自定義地圖組件盹憎。
如何在項目中接入 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 說明見下文 version 指定高德地圖版本 不填則使用默認值: 1.4.0
也可以手工引入你需要的組件：
import Map from 'react-amap/lib/map';
import Marker from 'react-amap/lib/marker';
// ... your other code
以上為簡單場景的應用。 tips: Map 組件的父元素須設置高度和寬度铐刘；關于代碼中的 Map 組件的 amapkey 屬性見下方的說明陪每。
關于 Key
在上面的例子中需要給 Map 組件傳入 amapkey 屬性，這個是高德地圖給開發(fā)者分配的開發(fā)者 Key镰吵；你可以在高德開放平臺申請你自己的 Key檩禾。
在 react-amap 中 Key 的傳入方式有兩種:
- 給 Map 組件傳入
amapkey屬性（因為 React 框架本身對key屬性有其他作用，所以不能用key疤祭，所以我們用amapkey）锌订，這樣的缺點是如果多個地方使用就要每次都要傳入； - 你也可以定義一個純組件,把 Map 組件的 amapkey 屬性寫好后返回新組件画株。
- 直接把你的 Key 定義在全局變量
window.amapkey上，react-amap 在調用高德接口時會嘗試從這里讀取啦辐。（不推薦）
組件的使用請移步組件文檔谓传。
