RAMAP

高德地图的 React 实现

要求

react >= 16.3.0

特性

• 简单
• 高效
• 灵活

示例

加载地图

import React from 'react'
import ReactDOM from 'react-dom'
import {Map, Polyline} from 'ramap'
 
ReactDOM.render(
  <Map apiKey="your api key" v="1.4.10" >
    <Polyline
      path={[
        [75.757904, 38.118117],
        [97.375719, 24.598057],
        [117.375719, 38.118117]
      ]}
      strokeWeight={6}
      strokeColor="#52c41a"
      outlineColor="#fff"
      lineCap="round"
      showDir
      isOutline
      cursor="pointer"
      extData={{id: 1}}
    >
      {
        polyline => {
          polyline.on('click', () => {
            console.log(polyline.getExtData().id)
          })
        }
      }
    </Polyline>
  </Map>,
  document.getElementById('app')
)

自定义普通组件

import {withProps} from 'ramap'
 
export default withProps(props => {
  const {children, ...config} = props
  const instance = new window.AMap.Text(config)
  children && children(instance)
 
  return instance
})

自定义 UI 组件

import withUI from './withUI'
 
export default withUI('ui/overlay/SimpleMarker')(({props, instance}) => {
  const {children} = props
 
  /*
    instance 此处代表 SimpleMarker 实例
    可以在此处对 instance 进行操作
  */
  children && children(instance)
 
  return null
})

内置组件

普通组件：

• Polyline
• Polygon
• InfoWindow

插件

• Geocoder
• ToolBar

UI 组件

• PointSimplifier
• SimpleMarker

Map

父组件：无

属性

• apiKey: <String> 您申请的 key 值
• v: <String> js API 版本

其它支持的属性请参照此处

Polyline

父组件：Map

支持的属性请参照此处

Polygon

父组件：Map

支持的属性请参照此处

InfoWindow

父组件：Map

支持的属性请参照此处

Plugin

父组件：Map

Geocoder

父组件：Plugin

支持的属性请参照此处

ToolBar

父组件：Plugin

支持的属性请参照此处

UI

父组件：Map

PointSimplifier

父组件：UI

支持的属性请参照此处

SimpleMarker

父组件：UI

支持的属性请参照此处

Sider

父组件：Map

属性

• children <ReactElement>

此组件为自定义组件，在右侧展示悬浮侧边栏。

高阶组件

withUI

主要用于自定义 UI 组件

/*
 * context:
 * - props: 组件接收的属性值
 * - instance: UI 模块实例
 * - map: 模块所处的高德地图实例
 * - Module: UI 模块类
 */
withUI('UI 模块名称，例如：ui/misc/PointSimplifier')(context => {
  // 你的逻辑
  return null
})

withProps

主要用于自定义普通组件

withProps(props => {
  const {children, ...config} = props
  const instance = new window.AMap.Text(config)
  children && children(instance)
 
  return instance
})

注意

• 所有组件均不需要传递 map 参数
• 组件接收一个函数作为 children
  • 函数参数为实例化的高德模块，这样可以在函数中通过 js 对实例进行事件绑定、初始化等任意操作
  • 此函数在组件生命周期内只会执行一次
  • 建议在自定义组件时也这样做
• 自定义普通组件时函数需以高德实例作为返回值，自定义 UI 组件则不需要