react Amap引入高德地圖，並實現搜索定位。

                                                   react 引入高德地圖，並實現搜索定位

一、react 引入Amap：

        Amap官方地址：https://elemefe.github.io/react-amap/articles/start

         按照官方操作說明，安裝相應的npm即可，這裏不做重複贅述。

二、實現效果：

        注意：代碼裏面涵蓋了一些自己的代碼邏輯，當你改爲自己的時候，注意刪除不需要的代碼即可。

三、代碼實現：

 

/*
 * @Author: hwf - [email protected] 
 * @Date: 2020-06-04 08:23:13 
 * @Last Modified by: hwf
 * @Last Modified time: 2020-06-05 15:43:38
 */

import React, { Component } from 'react';
import { Row, Col,Select } from 'antd';
import { Map, Marker } from 'react-amap';

const mapKey = '42c177c66c03437400aa9560dad5451e'
const { Option } = Select;

class AddressMap extends Component {

    constructor() {
        super();
        this.state = {
            // polygonActive: true,
            pois:[],
            signAddrList: {
                address: "",
                distance: NaN,
                id: "B0FFLAFX5T",
                location:  {P: 25.082074, Q: 102.73076000000003, lng: '', lat: ''},
                name: "",
                shopinfo: "0",
                tel: "",
                type: ""
            },
        };
        // 圍欄樣式
        this.polygonStyle = {
            isOutpoint: true,
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: "#1791fc",
            zIndex: 50
        }

         this.selectAddress = {
            // created必須要擁有,用來初始化創建相應對象
            created: () => {
                let auto
                let placeSearch
                window.AMap.plugin('AMap.Autocomplete', () => {
                    auto = new window.AMap.Autocomplete({
                        input: 'tipinput',
                        pageSize: 10,
                        pageIndex: 1,
                        citylimit: true,    // 僅搜索本城市的地名
                        city: '昆明', // 限制爲只能搜索當前地區的位置
                        outPutDirAuto: true
                        // type: '汽車服務|汽車銷售|汽車維修|摩托車服務|餐飲服務|購物服務|生活服務|體育休閒服務|醫療保健服務|住宿服務|風景名勝|商務住宅|政府機構及社會團體|科教文化服務|交通設施服務|金融保險服務|公司企業|道路附屬設施|地名地址信息|公共設施'
                    });
                })
                // 創建搜索實例
                window.AMap.plugin('AMap.PlaceSearch', () => {
                    placeSearch = new window.AMap.PlaceSearch({
                        input: 'tipinput',
                        pageSize: 10,
                        pageIndex: 1,
                        citylimit: true,    // 僅搜索本城市的地名
                    });
                })

                window.AMap.event.addListener(auto, "select", (e) => {
                    placeSearch.search(e.poi.name)
                })
            }
        }
    }

    // 選中某條數據，並返回給子組件
    onChange =(id)=>{
        // 匹配出當前選中得一行數據
        const signAddrList= this.state.pois.find(item => item.id === id) || null
        if(signAddrList){
            this.setState({
                signAddrList
            })
            // 傳到選擇地址模態框
            this.props.mapData(signAddrList);
        }
    }

    // 加載當前選擇的地址座標,並進行定位
    componentWillMount = ()=>{
        this.setState({
            signAddrList:{
                location:  {P: 25.082074, Q: 102.73076000000003, lng: this.props.areaSelectData.longitude, lat: this.props.areaSelectData.latitude},
            }
          
        })
    }

    // 進行select框動態輸入焦點事件監聽，並實現搜索
    onSearch =(val,isFocus=false)=>{
        // 獲取到當前得位置進行搜索區域限制
        const city =  this.props.areaSelectData.id;
       
        const {pois}=this.state
        if(isFocus && pois && pois.length){
           return
        }
      
        const place = new window.AMap.PlaceSearch({
            pageSize: 10,
            pageIndex: 1,
            citylimit: true,    // 僅搜索本城市的地名
            city, // 限制爲只能搜索當前地區的位置
        })
          // 進行搜索
        place.search(val,(status, result)=>{
            const {info,poiList}=result
            if(result.length){return}
            if(info  !== 'OK'){
                return 
            }
            if(poiList.pois && Array.isArray(poiList.pois)){
                this.setState({
                    pois:poiList.pois
                })
            }
        })
    }

    render() {
        // console.log('this.props.areaSelectData',this.props.areaSelectData);
        // const path = this.props.polygonPath;
        // // 獲取已經存到庫裏面的電子圍欄區域，例如：昆明市
        // if (path && path.length) {
        //     path.map(item => {
        //         return {
        //             longitude: item.longitude,
        //             latitude: item.latitude
        //         }
        //     });
        // }

        const { signAddrList } = this.state;

        return (
            <div style={{ width: '100%', height: '400px' }}>
                <Row gutter={24}>
                    <Col span={8}>
                        <Select
                            showSearch
                            style={{ width: '100%' }}
                            placeholder="請輸入地址"
                            optionFilterProp="children"
                            value={this.state.value}
                            onSearch={this.onSearch}
                            onFocus={(e) => this.onSearch(e.target.value,true)}
                            onChange={ this.onChange}
                        >
                            {
                                this.state.pois.map(item=>
                                    
                                <Option key={item.id} value={item.id}>{item.name}</Option>
                                )
                            }
                        </Select>
                    </Col>
                </Row>
                <br/>
                {
                    ! this.props.isHideMap ?
                    <Map  amapkey={mapKey}
                        plugins={["ToolBar", 'Scale']}
                        events={this.selectAddress}
                        center={[signAddrList.location.lng, signAddrList.location.lat]}
                        zoom={15}>
                        <Marker position={[signAddrList.location.lng, signAddrList.location.lat]} />
                    </Map> : null
                }
            </div>
        )
    }
}


export default AddressMap

四、總結：

      總的來說，只需要按照官方的要求，在create中進行創建，即可獲取操作到高德地圖的相應API接口了，剩餘的就是接口調用，完成你自己的複雜邏輯即可。

編寫人：洪偉富

有問題請聯繫：[email protected]