React-amap-sdk NPM

react-amap-sdk

安装

npm install --save react-amap-sdk

基础使用

import React, { Component } from 'react'

import { Map, Marker } from 'react-amap-sdk'

class Example extends Component {
  render () {
    return (
      <Map
        mapKey='您的高德地图key'
        version='1.4.8'
        plugin={this.plugin}
        width={300}
        height={300}
        center={center}
      >
        <Marker
          icon={icon}
          position={position}
          onClick={e => {
            console.log('我被点击了', e.target)
          }}
        />
      </Map>
    )
  }
}

Map组件加载

Map组件支持自动创建script去加载高德sdk和直接在网页中引入script脚本。如果在Map中加载组件需要三个参数代码如下：

// 自动加载高德sdk
<Map
  mapKey='您的高德地图key'
  version='1.4.8'
  plugin={this.plugin}
/>

其中mapKey和version为必选，plugin为可选它是您要加载高德地图的扩展插件。mapKey为您在高德地图中申请的key

手动在html中插入scirpt引入高德sdk，并且在Map组件中使用customeLoad属性即可

<Map
  customeLoad
/>

属性映射

所有的属性都和高德地图的属性一一对应，使用时直接使用高德地图对应的属性即可。除了事件和少数扩展属性和高德地图不同之外。这里拿Marker组件来进行演示代码如下：

<Map
  customeLoad
>
  <Marker
    icon={icon}
    position={markerPosition}
    offset={markerOffset}
    angle={angle}
    title='我是鼠标滑过的提示文字'
    draggable={true}
    clickable={clickable}
    extData={this.extData}
    onClick={e => {
      console.log('我被点击了', e.target.getExtData())
    }}
  />
</Map>

在上面Marker组件的属性中，除了onClick之外，其余的属性都是保持和高德地图一致，目的在于简化使用和记忆。

注：对于事件保持了和react官方一致的命名方法