React使用高德地图 （react-amap）（一）

pc版React重构，使用到了高德地图。搜了资料，发现有一个针对React进行封装的地图插件react-amap。官方网址：https://elemefe.github.io/react-amap/components/map，有兴趣的可以看下里面的API。

react-amap 安装

1、使用npm进行安装，目前是1.2.8版本：

cnpm i react-amap

2、直接使用sdn方式引入

<script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>

react-amap 使用

import React,{
   Component} from 'react'
import {
   Map,Marker} from 'react-amap'
const mapKey = '1234567809843asadasd' //需要自己去高德官网上去申请
class Address extends Component {
   
	constructor (props) {
   
        super (props)
        this.state = {
     
        }
    }
	render(){
   
		return (
			<div style={
   {
   width: '100%', height: '400px'}}>
				<Map amapkey={
   mapKey} 
				     zoom={
   15}></Map>
			</div>
		)
	}
}

export default Address

这样的话，就会初始化一个简单的地图。

实际开发过程中，你会有比较复杂的使用场景。比如需要标记点、对地图进行缩放、能够定位到当前位置、位置搜索等等功能。需求大致如下图所示：

这样的话，那就需要引入插件以及组件的概念了。
ToolBar、Scale插件

<Map  plugins={
   ["ToolBar", 'Scale']}></Map>

Marker 地图标记

<Map>
	<Marker position={
   ['lng','lat']}></Marker>
</Map>

InfoWindow 窗体组件

<Map>
	<InfoWindow
            position={
   this.state.position}
            visible={
   this.state.visible}
            isCustom={
   false}
            content={
   html}
            size={
   this.state.size}
            offset={
   this.state.offset}
            events={
   this.windowEvents}
          />
</Map>

通过 created 事件实现更高级的使用需求，在高德原生实例创建成功后调用，参数就是创建的实例；获取到实例之后，就可以根据高德原生的方法对实例进行操作：

const events = {
   
    created: