React+고 덕 지도 에서 실시 간 으로 경위도,위치 추적 주 소 를 가 져 옵 니 다.

1.고 덕 공식 튜 토리 얼 에 따라 초기 설정고 덕 지도 JSPI 1.4.15 문서
2.공식 예시 센터 를 참조 하여 지도의 창설 을 완성 한다예시 센터
다음,먼저 효과 도 를 봅 니 다.

1.지도 초기 화
지도 용 기 를 만 든 후 초기 화 할 때 기본 매개 변 수 를 설정 해 야 합 니 다.여 기 는 자주 사용 하 는 몇 가지 효 과 를 설정 하 였 습 니 다.다른 효 과 는 api 를 참고 하여 추가 할 수 있 습 니 다.

Dom：<div id='map_container'>
        //    
    </div>
    
//       
class GeoMap {
    constructor() {
        this.el = 'map_container'
        this.defaultConfig = { //    
            zoom: 16,              //       
            touchZoomCenter: 1,    //  1        
            resizeEnable: true,    //           
            doubleClickZoom: true, //       
        }
        this.map = null   //     
        this.mapMove = false //        
        this.centerPixel = { y: '-999', x: '-999' } //       
    }
    //      
    initFn() {
        this.createMap()
        // ...
    }
    //     
    createMap() {
        this.map = new AMap.Map(this.el, this.defaultConfig)
        //             （    ）
        this.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c')
    }
    // ...
 }
 export default new GeoMap()

2.지도 묶음

먼저 지도 에 중심 점 을 그리고 실현 해 야 할 효 과 를 실현 합 니 다.
지도 가 드래그 됨 에 따라 이동 할 수 없습니다지도 용기 의 중심 위치
지도 상 자 는 부모 요소 로 서 점 을 찍 어 절대적 인 포 지 셔 닝 을 하여 첫 번 째 점 을 실현 했다.

    Dom: <div id='map_container'> //    
          <div id='center_icon' style={{left: `${  .centerPixel.x}px`, top: `${  .centerPixel.y}px` }}>
            <img src='    ' /> //            
          </div>
       </div>
    css: #map_container {
            flex: 1;
            position: relative;
            #center_icon {
                position: absolute;
                z-index: 101;
                >img{  
                    width: 52px;
                    height: 64px;
                    // --------            ---------
                    position: relative;
                    top: -64px;
                    left: -26px;
                }
            }
         }

그리고 묶 는 left 와 top 값 을 설정 해 야 합 니 다.어떻게 동적 으로 묶 는 픽 셀 값 입 니까?여기 서 우 리 는 고 덕 api,getCenter()를 통 해 지도 중심 경위도 좌표 lg LatToContainer()지도 경위도 좌 표를 지도 용기 픽 셀 좌표 로 전환 합 니 다.

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

사진 을 찍 으 려 면 상대 적 으로 자신의 높이 top:-자신의 높이 left:-자신의 너비/2 를 정 해 야 합 니 다.그 이 유 는 포 지 셔 닝 점 은 상자 의 왼쪽 상단 으로 중심(점선 상자)을 정 해 야 하기 때문에 우 리 는(점선 상자)위 치 를(실선 상자)위치 로 이동 시 켜 야 합 니 다.이렇게 하면 묶 는 위치 가 정확 합 니 다.다음 그림 을 보십시오.

3.포 지 셔 닝 오픈
필요:
지도 페이지 에 들 어가 면 자동 으로 위치 추적 기능 이 켜 집 니 다4.567917.포 지 셔 닝 성공 후의 위 치 를 지도의 중심 점 으로 한다.
이 두 가 지 는 모두 api 를 통 해 이 루어 진 것 으로 비교적 간단 하 다.위치 추적 실패 후 중국어 알림 되 돌리 기

    getLocation() {
        const mapError = new Map([
            ['Get ipLocation failed.', 'IP      '],
            ['Browser not Support html5 geolocation.', '            '],
            ['Geolocation permission denied.', '               '],
            ['Get geolocation time out.', '       '],
            ['Get geolocation failed.', '    ']
        ])
        this.map.plugin('AMap.Geolocation', () => {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //         
                timeout: 30000,           //  n      
                showButton: false,        //      
                showMarker: true,         //                 
                showCircle: false,        //                
                panToLocation: true,      //                   ---
                zoomToAccuracy: true,     //                       
            })
            this.map.setZoom(16) //                     
            this.map.addControl(geolocation)  //     
            geolocation.getCurrentPosition()  //          
            AMap.event.addListener(geolocation, 'complete', (result) => {
                //        ，        、         ----            
            })
            AMap.event.addListener(geolocation, 'error', (err) => { //          
                let msg = mapError.get(err.message) || err.message
                console.log(msg);
            })
        })
    }

4.지도 변화 감청
api 호출 을 통 해 감청 지도 변화 실현:이동 중,이동 종료,크기 조정,드래그 등

    mapMove() {
        // *      
        this.map.on('mapmove', () => {
           this.mapMove = false
        })
        // *       
        this.map.on('moveend', () => {
            this.mapMove = true
            this.getCenterAddress() //     ----        
        })
    }

5.상세 주소 가 져 오기
지도 이동 이 끝 난 후 API 를 통 해 자세 한 주 소 를 가 져 옵 니 다.우선 이 두 가지 API 를 말씀 드 리 겠 습 니 다.

AMap.PlaceSearch().searchNearBy()는 중심 점 의 경위도,반경 과 키워드 에 따라 주변 조 회 를 한다

AMap.Geocoder().getAddress()지리 코딩 과 역 지리 코딩 서 비 스 는 주소 설명 과 좌표 간 의 상호 전환 에 사 용 됩 니 다

🤔이치 에 따 르 면 두 번 째 반환 은 첫 번 째 것 보다 정확 하지만 여러 번 의 실험 을 통 해 첫 번 째 는 오히려 정확 하 다.두 가지 방식 을 호 환 할 수 있 는데,여 기 는 첫 번 째 만 예 를 들 면 된다.

    getCenterAddress() {
        let lnglat = this.map.getCenter()
        AMap.service('AMap.PlaceSearch', () => {
            let placeSearch = new AMap.PlaceSearch({
                    pageSize: 10,
                    pageIndex: 1,
                    children: 1,
                    extensions: 'all',
                    type: '    |      |         |  |    |    |    /  |   |    |     |   |   |    ',
                })
            let center = [lnglat.lng, lnglat.lat]
            placeSearch.searchNearBy('', center, 50, (sta, result) => {
                if (sta === 'complete' && result.info === 'OK') {
                    // result.poiList.pois               
                })
            })
    }

6.애니메이션 묶 기😄

지도 이동 이 끝 난 후 묶음 점 에 위아래 로 뛰 는 애니메이션 을 추가 하고 이동 시 애니메이션 을 취소 합 니 다.

    Dom: <img src='    ' className={  .mapMove ? 'pinAnima' : ''}/>
    
    css: 
        .pinAnima{
            animation: bounce 0.75s;
        }
        
    @keyframes bounce {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0)
    }
}

7.끝
생각 은 사실 그렇게 복잡 하지 않다.지 도 를 상자 용기 로 생각 하고 지도 중심 점 을 상자 중심 점 으로 생각한다.[지도 중심 점]에 자 리 를 잡 고 움 직 이지 않 습 니 다.지 도 를 이동 할 때[지도 중심 점]경 위 를 획득 하고 특정한 위 치 를 설정 할 때 경 위 를[지도 중심 점]으로 설정 하면 됩 니 다.
그리고 다른 기능 도 있다.예 를 들 어 위치 설정,노선 그리 기,경로 계획,자동차 운행,레이더 애니메이션 등 관심 이 있 는 것 은 함께 연구 할 수 있다.휴대 전화 포 지 셔 닝 에 도 포 지 셔 닝 실패,포 지 셔 닝 시간 초과 등 문제 가 있 을 수 있 으 므 로 함께 연구 할 수 있다.
이상 은 React+고 덕 지도 에서 실시 간 으로 경위도,위치 추적 주소 에 대한 상세 한 내용 입 니 다.React 위치 추적 주소 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!