React BF AMap

React版本的AMap插件，使用AMap2.0版本，并通过JS API Loader进行地图加载工作

安装

npm i react-bf-amap

使用

import React from 'react';
import { BFAMap } from 'react-bf-amap';

const Map = (props) => {
  return (
    <div  style={{ width: '200px', height: '200px' }}>
      <BFAMap
        id={YOUR_ID}
        map_key={YOUR_AMAP_KEY}
        options={{
          zoom: 11,
          center: [121.498586, 31.239637],
          viewMode: '3D',
        }}
        plugins={['Scale', 'OverView', 'ToolBar',]}
        setMap={(map, AMap) => {
          const scale = new AMap.Scale();
          map.addControl(scale);
          const tollBar = new AMap.ToolBar();
          map.addControl(tollBar);
          console.log(map);
        }}/>
    </div>
  );
};

export default Map;

重要：

1. 一定要添加外容器，并保证外容器存在实际大小
2. 确保你已经申请过高德地图的key，并能够引入改组件中使用

参数

参数名称	参数类型	是否必填	说明	示例值
id	string	是	地图容器的id	a_map
map_key	string	是	地图的key	YOUR_AMAP_KEY
options	object	否	地图初始化的设置	{ zoom: 11, center: [121.498586, 31.239637] }
plugins	string[]	是	地图插件	['Scale', 'OverView', 'ToolBar']
loca	boolean	否	loca插件使用，暂时固定使用1.3.2版本	false
AMapUI	object	是	AMapUI插件	{ version: '1.1', plugins: [] }
setMap	function	是	设置地图, 返回值 map:地图实例,AMap:AMap函数,后续所有地图相关操作应该都在这里进行	(map,AMap)=>{}

AMap地图相关文档

AMap JS API v2.0

AMapUI JS API v2.0

License

MIT

更新日志

v1.0.4 修复父组件状态操作使得地图重新加载的问题
v1.0.3 添加文档