Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したところ、React 用にカプセル化されたマッププラグイン react-amap を見つけました。公式サイト: https://elemefe.github.io/react-amap/components/map。ご興味があれば、API をチェックしてみてください。

react-amap のインストール

1. npm を使用してインストールします。現在のバージョンは 1.2.8 です。

cnpm と react-amap

2. SDNを直接使用して導入する

<script src="https://unpkg.com/[email protected]/dist/react-amap.min.js"></script>

React-amap の使用

React をインポートします。{Component} を 'react' からインポートします。
'react-amap' から {Map,Marker} をインポートします。
const mapKey = '1234567809843asadasd' //Amapの公式サイトで申請する必要があります class Address extends Component {
	コンストラクタ（プロパティ）{
        スーパー（小道具）
        この状態 = {  
        }
    }
	与える（）{
		戻る （
			<div スタイル = {{幅: '100%', 高さ: '400px'}}>
				<マップ amapkey={mapKey} 
				     ズーム={15}></マップ>
			</div>
		）
	}
}

デフォルトアドレスをエクスポート

この場合、単純なマップが初期化されます。

ここに画像の説明を挿入

実際の開発プロセスでは、より複雑な使用シナリオが発生します。たとえば、ポイントをマークしたり、地図を拡大/縮小したり、現在の場所を特定したり、場所を検索したりする必要があります。要件はおおよそ次の図のようになります。

ここに画像の説明を挿入

この場合、プラグインとコンポーネントの概念を導入する必要があります。
ツールバー、スケールプラグイン

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

マーカーマップマーカー

<地図>
	<マーカー位置={['lng','lat']}></マーカー>
</マップ>

情報ウィンドウフォームコンポーネント

<地図>
	<情報ウィンドウ
            位置 = {この状態の位置}
            可視 = {この状態が可視}
            isCustom={false}
            コンテンツ={html}
            サイズ={this.state.size}
            オフセット = {this.state.offset}
            イベント = {this.windowEvents}
          />
</マップ>

created イベントは、より高度な使用要件を実現するために使用されます。これは、Amap ネイティブインスタンスが正常に作成された後に呼び出されます。パラメータは created インスタンスです。インスタンスを取得したら、Amap ネイティブメソッドに従ってインスタンスを操作できます。

定数イベント = {
    作成されました: (インスタンス) => { console.log(instance.getZoom())},
    クリック: () => { console.log('マップをクリックしました') }
}
<マップイベント={イベント} />

より複雑な住所検索、住所マーキング、逆地理解析コードを実装します。

React をインポートし、{ Component } を 'react' からインポートします。
'antd' から { Modal 、 Input } をインポートします。
'./index.scss' からスタイルをインポートします
'classnames' からクラス名をインポートします
'react-amap' から { Map 、Marker、InfoWindow} をインポートします。
'SRC/statics/images/signin/marker2.png' からマーカーをインポートします

定数マップキー = '42c177c66c03437400aa9560dad5451e'

クラス Address は Component を拡張します {
    コンストラクタ（プロパティ）{
        スーパー(小道具)
        この状態 = {
            署名アドレスリスト:{
                名前：''、
                住所:''、
                経度: 0,
                緯度: 0
            },
            ジオコーダ:''、
            検索コンテンツ:''、
            isChose:false
        }
    }

    //データ変更一般メソッド（単層）

    changeData = (値、キー) => {
        {signAddrList} = this.stateとする
        signAddrList[キー] = 値
        this.setState({
            署名アドレスリスト:署名アドレスリスト
        })
    }

    場所検索 = (e) => {
        this.setState({searchContent:e})
    }

    検索場所 = (e) => {
        コンソールログ(1234,e)
    }





    コンポーネントマウント() {
    
    }

    与える（） {
        {changeModal、saveAddressDetail} = this.propsとします
        {signAddrList} = this.stateとする
        定数selectAddress = {
            作成されました:(e) => {
                自動で
                ジオコーダを使う
                window.AMap.plugin('AMap.Autocomplete',() => {
                    auto = 新しいウィンドウ.AMap.Autocomplete({input:'tipinput'});
                })

                window.AMap.plugin(["AMap.Geocoder"],function(){
                    ジオコーダ = 新しい AMap.Geocoder({
                        radius:1000, // 既知の座標を中心点、半径を半径として使用して、範囲内の興味のあるポイントと道路情報を返します extensions: "all" // 住所の説明と近くの興味のあるポイントと道路情報を返します。デフォルトは "base" です
                    });
                });

                window.AMap.plugin('AMap.PlaceSearch',() => {
                    place = new window.AMap.PlaceSearch({}) とします。
                    _this = this とします
                    window.AMap.event.addListener(auto,"select",(e) => {
                        place.search(e.poi.name)
                        geocoder.getAddress(e.poi.location,function(status,result) {
                            if (ステータス === '完了'&&result.regeocode) {
                                address = result.regeocode.formattedAddress とします。
                                データを result.regeocode.addressComponent とします。
                                名前 = data.township + data.street + data.streetNumber とします。
                                _this.changeData(アドレス、'addr')
                                _this.changeData(名前、'名前')
                                _this.changeData(e.poi.location.lng,'経度')
                                _this.changeData(e.poi.location.lat, '緯度')
                                _this.setState({isChose:true})
                            }
                        })
                    })
                })
            },
            クリック:(e) => {
                const _this = これ
                var ジオコーダ
                var 情報ウィンドウ
                var lnglatXY = new AMap.LngLat(e.lnglat.lng,e.lnglat.lat);
                let content = '<div>配置....</div>'

                window.AMap.plugin(["AMap.Geocoder"],function(){
                    ジオコーダ = 新しい AMap.Geocoder({
                        radius:1000, // 既知の座標を中心点、半径を半径として使用して、範囲内の興味のあるポイントと道路情報を返します extensions: "all" // 住所の説明と近くの興味のあるポイントと道路情報を返します。デフォルトは "base" です
                    });
                    geocoder.getAddress(e.lnglat,function (status,result) {
                        if (ステータス === '完了'&&result.regeocode) {
                            address = result.regeocode.formattedAddress とします。
                            データを result.regeocode.addressComponent とします。
                            名前 = data.township + data.street + data.streetNumber とします。
                          
                            _this.changeData(アドレス、'addr')
                            _this.changeData(名前、'名前')
                            _this.changeData(e.lnglat.lng,'経度')
                            _this.changeData(e.lnglat.lat,'緯度')
                            _this.setState({isChose:true})
                        }
                    })
                });
                
            }
        }
        戻る （
            <div>
                <モーダル表示={true}
                       title="オフィス所在地"
                       中央揃え={true}
                       onCancel={() => changeModal('addressStatus',0)}
                       onOk = {() => saveAddressDetail(signAddrList)}
                       幅={700}>
                    <div className={styles.serach}>
                        <input id="ヒント入力"
                               クラス名={styles.searchContent}
                               onChange={(e) => this.placeSearch(e.target.value)}
                               onKeyDown={(e) => this.searchPlace(e)} />
                        <i className={classname(styles.serachIcon,"iconfont icon-weibiaoti106")}></i>
                    </div>
                    <div className={styles.mapContainer} id="コンテンツ" >
                        {
                            this.state.isChose ? <Map amapkey={mapKey}
                                                      plugins={["ツールバー", 'スケール']}
                                                      イベント={選択アドレス}
                                                      中心 = { [ signAddrList.経度、signAddrList.緯度] }
                                                      ズーム={15}>
                                <マーカーの位置={[signAddrList.longitude,signAddrList.latitude]}/>
                            </Map> : <Map amapkey={mapKey}
                                          plugins={["ツールバー", 'スケール']}
                                          イベント={選択アドレス}
                                          ズーム={15}>
                                <マーカーの位置={[signAddrList.longitude,signAddrList.latitude]}/>
                            </マップ>
                        }
                    </div>
                    <div className="mar-t-20">詳細住所:
                        {署名アドレスリスト.addr}
                    </div>
                </モーダル>
            </div>
        ）
    }
}

デフォルトアドレスをエクスポート

ReactでAmapを使った実装例（react-amap）については以上です。React Amapに関するより詳しい内容は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: