在React中使用高德地图

在react中使用套的地图

1.标题在react中使用道德地图首先需要去npm 下载 然后引用import { Map, Marker} from react-amap;

2.引入之后需要在一些简单的配置如下

render() {
          
   
        let mapStyle = {
          
   
            boxSizing: border-box,
            width: this.props.width || 400px,
            height: this.props.height || 300px
        }
        return (
            <div>
                <div className=container id=container style={
          
   mapStyle}>
                    <Map events={
          
   this.amapEvents} amapkey=可以自己申请 version=1.4.15>
                        <Marker position={
          
   this.state.position} events={
          
   this.markerEvents}/>
                    </Map>
                </div>
            </div>
        );
    }

3. 然后配置一下相对应的事件如下

this.state = {
          
   
            currentLocation: ,
            position: {
          
   longitude: 120, latitude: 30},
        }
 this.amapEvents = {
          
   
            created: (mapInstance) => {
          
   
                window.AMap.plugin(AMap.Geocoder, () => {
          
   
                    this.geocoder = new window.AMap.Geocoder({
          
   
                        city: "010"//城市，默认：“全国”
                    });

                })
            },
            click: (e) => {
          
   
                const _this = this;
                const lnglat = e.lnglat;
                _this.setState({
          
   //通过点击的经纬度来进行添加定位符号
                    position: lnglat,
                });


                this.geocoder.getAddress && this.geocoder.getAddress(lnglat, (status, result) => {
          
   
                    if (status === complete) {
          
   
                        if (result.regeocode) {
          
   
                            _this.props.detial(result.regeocode.formattedAddress || 未知地点, e.lnglat)
                        } else {
          
   
                            _this.props.detial(result.regeocode.formattedAddress || 未知地点, e.lnglat)
                        }
                    } else {
          
   
                        _this.props.detial(result.regeocode.formattedAddress || 未知地点, e.lnglat)
                    }
                })
            }
        };
 this.markerEvents = {
          
   
            created: (markerInstance) => {
          
   
            }
        }

4.这样就可以通过传入经纬度然后拿到相对应的信息，值得一提的是在组件下载完成后在window上会有一个AMap 的变量，我搜索了一些文章大家都是找不到AMap 那么这里提一下 在react 里直接写AMap 会报错所以我们要写全 写成window.AMap 就可以去得到然后看官网的案例就可以完成基本需求了