Dom：<div id='map_container'>
        //地圖容器
    </div>
    
//定義一個(gè)地圖類
class GeoMap {
    constructor() {
        this.el = 'map_container'
        this.defaultConfig = { //默認(rèn)配置
            zoom: 16,              // 默認(rèn)縮放級(jí)別
            touchZoomCenter: 1,    // 為1時(shí)縮放以地圖中心
            resizeEnable: true,    // 監(jiān)控地圖容器尺寸變化
            doubleClickZoom: true, // 雙擊放大地圖
        }
        this.map = null   // 地圖實(shí)例
        this.mapMove = false // 地圖是否移動(dòng)中
        this.centerPixel = { y: '-999', x: '-999' } // 扎點(diǎn)默認(rèn)位置
    }
    // 初始化地圖
    initFn() {
        this.createMap()
        // ...
    }
    // 創(chuàng)建實(shí)例
    createMap() {
        this.map = new AMap.Map(this.el, this.defaultConfig)
        // 給地圖添加自己喜歡的風(fēng)格（背景顏色）
        this.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c')
    }
    // ...
 }
 export default new GeoMap()

    Dom: <div id='map_container'> //地圖容器
          <div id='center_icon' style={{left: `${實(shí)例.centerPixel.x}px`, top: `${實(shí)例.centerPixel.y}px` }}>
            <img src='扎點(diǎn)圖片' /> // 文章結(jié)尾有扎點(diǎn)動(dòng)畫介紹
          </div>
       </div>
    css: #map_container {
            flex: 1;
            position: relative;
            #center_icon {
                position: absolute;
                z-index: 101;
                >img{  
                    width: 52px;
                    height: 64px;
                    // --------以下代碼下面會(huì)做詳細(xì)介紹---------
                    position: relative;
                    top: -64px;
                    left: -26px;
                }
            }
         }

    setCenterIcon() {
        let lnglat = this.map.getCenter()
        let pixel = this.map.lngLatToContainer(lnglat)
        this.centerPixel = pixel
    }

    getLocation() {
        const mapError = new Map([
            ['Get ipLocation failed.', 'IP精確定位失敗'],
            ['Browser not Support html5 geolocation.', '瀏覽器不支持原生定位接口'],
            ['Geolocation permission denied.', '瀏覽器禁止了非安全域的定位請(qǐng)求'],
            ['Get geolocation time out.', '瀏覽器定位超時(shí)'],
            ['Get geolocation failed.', '定位失敗']
        ])
        this.map.plugin('AMap.Geolocation', () => {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位
                timeout: 30000,           //超過n秒后停止定位
                showButton: false,        //顯示定位按鈕
                showMarker: true,         //定位成功后在定位到的位置顯示點(diǎn)標(biāo)記
                showCircle: false,        //定位成功后用圓圈表示定位精度范圍
                panToLocation: true,      //定位成功后將定位到的位置作為地圖中心點(diǎn)---
                zoomToAccuracy: true,     //調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見
            })
            this.map.setZoom(16) // 縮放比例改變后重新定位時(shí)設(shè)置初始縮放比例
            this.map.addControl(geolocation)  // 添加控件
            geolocation.getCurrentPosition()  // 進(jìn)入頁面時(shí)自動(dòng)定位
            AMap.event.addListener(geolocation, 'complete', (result) => {
                // 不在這里取數(shù)據(jù)，因?yàn)榉祷氐慕?jīng)緯度、詳細(xì)地址偏差比較大----下面有獲取精確地址的介紹
            })
            AMap.event.addListener(geolocation, 'error', (err) => { // 定位失敗的錯(cuò)誤提示
                let msg = mapError.get(err.message) || err.message
                console.log(msg);
            })
        })
    }

    mapMove() {
        // * 地圖移動(dòng)中
        this.map.on('mapmove', () => {
           this.mapMove = false
        })
        // * 地圖移動(dòng)結(jié)束
        this.map.on('moveend', () => {
            this.mapMove = true
            this.getCenterAddress() // 獲取地址----下面會(huì)做詳細(xì)介紹
        })
    }

    getCenterAddress() {
        let lnglat = this.map.getCenter()
        AMap.service('AMap.PlaceSearch', () => {
            let placeSearch = new AMap.PlaceSearch({
                    pageSize: 10,
                    pageIndex: 1,
                    children: 1,
                    extensions: 'all',
                    type: '通行設(shè)施|地名地址信息|政府機(jī)構(gòu)及社會(huì)團(tuán)體|樓宇|產(chǎn)業(yè)園區(qū)|風(fēng)景名勝|(zhì)機(jī)場(chǎng)出發(fā)/到達(dá)|火車站|港口碼頭|長途汽車站|地鐵站|輕軌站|公交車站',
                })
            let center = [lnglat.lng, lnglat.lat]
            placeSearch.searchNearBy('', center, 50, (sta, result) => {
                if (sta === 'complete' && result.info === 'OK') {
                    // result.poiList.pois 數(shù)組第一項(xiàng)就是獲取的精確地址
                })
            })
    }

    Dom: <img src='扎點(diǎn)圖片' className={實(shí)例.mapMove ? 'pinAnima' : ''}/>
    
    css: 
        .pinAnima{
            animation: bounce 0.75s;
        }
        
    @keyframes bounce {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0)
    }
}