npm install --save react-amap

import React, { Component } from 'react'

import { Link } from 'react-router-dom'

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

export default class Page1 extends Component {

    constructor(){

        super();

        this.toolEvents = {

          created: (tool) => {

            this.tool = tool;

          }

        }

        this.mapPlugins = ['ToolBar'];

        this.mapCenter = {longitude: 120, latitude: 35};

        this.markerPosition = {longitude: 121, latitude: 36};

      }

    render () {

        return (

            <div style={{height:"100%"}}>

                <Map

                    version={'1.4.4'}//amap版本

                    amapkey={'注册一个高德地图应用的appkey'}

                    plugins={this.mapPlugins}

                    center={this.mapCenter}

                    zoom={6}

                    expandZoomRange={true}

                    zooms={10}

                    animateEnable={true}

                    useAMapUI>

                    <Marker position={this.markerPosition} />

                </Map>

            </div>

        )

    }

}

import React, { Component } from 'react'

import { Link } from 'react-router-dom'

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

const events = {

    click: (e) => {

        var p1 = [116.434027, 39.941037];

        var p2 = [e.lnglat.lng,e.lnglat.lat];

        var dis=window.AMap.GeometryUtil.distance(p1, p2);

        console.log(dis)

    },

}

export default class Page1 extends Component {

    constructor(){

        super();

        this.toolEvents = {

          created: (tool) => {

            this.tool = tool;

          }

        }

        this.mapPlugins = ['ToolBar'];

        this.mapCenter = {longitude: 120, latitude: 35};

        this.markerPosition = {longitude: 121, latitude: 36};

      }

    render () {

        return (

            <div style={{height:"100%"}}>

                <Map

                    version={'1.4.4'}//amap版本

                    amapkey={'你注册一个高德地图应用的appkey'}

                    plugins={this.mapPlugins}

                    center={this.mapCenter}

                    zoom={6}

                    expandZoomRange={true}

                    zooms={10}

                    animateEnable={true}

                    events={events}

                    useAMapUI>

                    <Marker position={this.markerPosition} />

                </Map>

            </div>

        )

    }

}