Skip to content

Croash/react-amapui-wrapper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-amapui-wrapper

一个令人兴奋的消息,react-amap 可以在内部load amapui 了,这样就可以不用我自己写的apiloader了.


简介

react-amapui-wrapper 是一个基于 react-amap 封装的高德地图组件;主要是用于处理 react-amap 的 AMapUI 的部分。


如何使用

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
import { Map as Amap } from 'react-amap'
import { Wrapper, DistrictExplorer } from 'react-amapui-wrapper'

class MapUIComponent extends Component {
  render() {
    const useAMapUI = true
    return (
    <div style={{ width:'600px', height:'400px' }}>
      <Amap useAMapUI = {useAMapUI}>
        <Wrapper>
          <DistrictExplorer
            events = {{}}
            initialAdcode={100000}
            eventSupport = {true}
            instanceName = {'DistrictExplorer'}
          />
        </Wrapper>
      </Amap>
     </div> 
    )
  }
}

ReactDOM.render(
  <MapUIComponent/>,
  document.querySelector('#app')
)

需要注意的是:引入AmapUi需要输入useAmapUi的参数,如上,否则会在控制台中出现import AmapUi plz...的console


如何自定义各个组件的初始化样式

可以使用组件的默认初始,也可以自定义组件的初始化样式

import React,{ Component } from 'react'
import { SimpleMarker } from 'react-amapui-wrapper'

class newMarker extends SimpleMarker {

  initPage(InstanceInit) {
    this[this.instanceName] = new InstanceInit({
      //前景文字
      iconLabel: 'circleMar',
      //背景图标样式
      iconStyle: '<div className="circleMar"></div>',
      containerClassNames: 'circleMar',
      //...其他Marker选项...,不包括content
      map: this.map,
      position: [116.405285, 39.904989]
    })
  }

}

其中initPage方法为初始化的方法,InstanceInit为实例的初始化方法,具体初始化方式需要参照官方文档高德地图UI组件库


相关配置项

  1. eventSupport为事件支持,true为支持事件,false为不支持,默认为false

  2. events为事件配置项,事件绑定方式与react-amap中绑定方式相同

  3. instanceName为从高德地图中load的地图元素,具体填入内容参照高德地图AMapUI。


如何自定义AMapUI组件

import React,{ Component } from 'react'
import { Base } from 'react-amapui-wrapper'

// 自定义组件, 此为自定义DistrictExplorer的过程
class newCp extends Base {

// initialInstance 用于初始化组件, 可自定义如何初始化组件
  initialInstance() {
    const { eventSupport=false } = this.props
    if (this[this.instanceName]) {
      return new Promise((resolve) => {
        resolve(this[this.instanceName])
      })
    } else {
      return new Promise((resolve) => {
        this.amapui.load(['ui/geo/DistrictExplorer'], (DistrictExplorer) => {

          this[this.instanceName] = new DistrictExplorer({
            eventSupport: eventSupport,
            map: this.map //关联的地图实例
          })
          const events = this.exposeInstance(this.props)
          events && this.bindEvents(events)
          this.initPage()
          resolve(this[this.instanceName])
        })
      })
    }
  }
export default newCp

todo

  • 1. 将组件的继承方式改成通过hoc继承
  • 2. 为各个组件添加static props和dynamic props

About

an amapui wrapper for react-amap

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published