react-amap 高德地图react嵌入 直接上代码 ctrl+c ctrl+v~~~~~~

import React,{Component} from 'react';
import {Map,Marker} from 'react-amap';
import $http from '../basic/http';
import sellerImg from '../images/sellerPos.png';
import myImg from '../images/myPos.png';
import REQUESTURL from '../basic/request';


class Amap extends Component{
    state = {
        zoom:13.5,
        position:[0,0],
        dragEnable:true,
        zoomEnable:true,
        shopOne:{
            latitude:0,
            longitude:0,
        }
    };
    constructor(){
        super();
    }
    componentDidMount(){

    const shopId = this.props.match.params.shopId;
    $http.post(REQUESTURL.shopInfo,{id:shopId})
        .then((res)=>{
            this.setState({shopOne:res.data})
        })
        .catch(()=>{
            console.log('error')
        })
}
render () {
    let pos = [this.state.shopOne.longitude,this.state.shopOne.latitude];
    let styleC = {
      background:`url(${sellerImg})`,
      backgroundSize: 'contain',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      width: '70px',
      height: '60px',
    };
    let styleD = {
        background:`url(${myImg})`,
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        width: '70px',
        height: '60px',
    };
    let that = this;
    const plugins = [
      'Scale',
      {
        name:'ToolBar',
        options:{
            visible: true,  // 不设置该属性默认就是 true
            onCreated(ins) {},
        },
      }
    ];
    let onComplete=(data)=>{
        that.setState({
            position:[data.position.getLng(),data.position.getLat()]
        })
    };
    let onError = ()=>{
        alert('定位失败');
        // that.setState({
        //     position:[112.58032,37.857965]
        // })
    };
    const events = {
        created: (instance) => {
            instance.plugin('AMap.Geolocation', function () {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(14, 130),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                instance.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
            });
        }
    };
    let selfPos = null;
    if(this.state.position[0]){
        selfPos = (<Marker position={this.state.position}><div style={styleD}></div></Marker>);
    }
    return(
        <div style={{position:'absolute',width: '100%', height: '100%'}}>
            <Map events={events}  amapkey={'faf3aff253e8971ec0d8e040d8c0f609'} plugins={plugins} center={pos} zoom={this.state.zoom} dragEnable={this.state.dragEnable} zoomEnable={this.state.zoomEnable}>
                {selfPos}
                <Marker position={pos}><div style={styleC}></div></Marker>
            </Map>
        </div>
    )
}
}

export default Amap;

复制过去直接用~~~~