Baidu 지도 안팎으로 마우스를 이동할 때 vue에서 오류가 보고되면 어떻게 해야 하나요?

최근 Vue를 사용하는 개발 프로젝트에서 문제가 발생했습니다. Baidu Maps를 사용할 때 마우스를 안팎으로 움직일 때 오류가 발생했습니다. 솔루션 프로세스는 상당히 까다롭습니다. 이제 전체 솔루션을 공유하겠습니다.

먼저, 문제의 구체적인 징후를 살펴보겠습니다.

Vue 컴포넌트에서는 Baidu 지도 플러그인(BaiduMapApi_Load)을 사용하며 JavaScript를 통해 지도 위에 여러 개의 오버레이(Overlay)를 그립니다. 마우스가 오버레이 안으로 이동하면 주입된 마우스 이벤트에 오류가 발생합니다. 오류 메시지는 "정의되지 않은 '픽셀' 속성을 읽을 수 없습니다"입니다.

코드를 확인한 결과 오류 코드는

var point = e.overlay.pixel,

즉, 이 명령문에서는 e.overlay.pixel을 인식할 수 없습니다.

그런 다음 관련 문서와 소스 코드를 확인한 결과 e.overlay.pixel은 공식 Baidu 지도 문서에 자세히 설명되어 있지 않으며 코드 구현에서만 추측할 수 있다는 것을 발견했습니다.

많은 시도 끝에 오버레이가 BMap.Overlay 클래스를 상속해야만 현재 오버레이의 DOM 요소를 e.overlay._div를 통해 얻을 수 있다는 것을 알았습니다. 그러나 e.overlay._div를 사용하면 여전히 현재 오버레이의 위치 정보를 얻을 수 없습니다. 즉, e.overlay.pixel 값이 정의되지 않습니다.

이런 경우에는 우리 스스로 문제를 해결해야 합니다. 추가 조사를 통해 마침내 문제가 지도와 오버레이 간의 상호작용 이벤트에 있음을 발견했습니다.

저희가 사용하는 바이두 지도 플러그인(BaiduMapApi_Load)은 공식 지도 API에서 구현하는 메시징 방식과 다릅니다. 우리 플러그인에서는 지도의 오버레이 관련 정보가 Vue Bus 이벤트를 통해 출력됩니다. 그러나 이는 e.overlay와 BMap 간의 브리징 관계에 영향을 미쳐 이전 문제로 이어집니다.

이 문제를 해결하려면 메시징을 개선해야 합니다. 구체적인 방법은 다음과 같습니다.

1. 오버레이가 로드되면 Vue 컴포넌트의 $emit 메소드를 호출하여 오버레이 정보를 이벤트 형식으로 보냅니다.
2. 지도 컴포넌트에서 이벤트를 듣고 저장합니다. Vue 인스턴스의 배열에 오버레이 ;
3. 마우스 이동 이벤트에서 다시 Vue Bus를 사용하여 오버레이 ID를 보냅니다.
4. 오버레이 위치 정보를 사용해야 하는 명령문에서 해당 오버레이를 배열에서 가져와서 가져옵니다. BMap.Overlay 프로토타입의 getProjection 메소드를 통해 해당 경도 및 위도;
5. 마지막으로 BMap.Map 클래스의 pointToPixel 메소드를 사용하여 얻은 경도와 위도를 지도의 좌표로 변환한 다음 e에 저장합니다. 오버레이.픽셀.

이 시점에서 문제는 완벽하게 해결되었습니다.

요약하자면 이 문제의 근본 원인은 메시지 전달 순서에 있습니다. Vue로 개발할 때 이러한 문제를 피하기 위해 이벤트의 배포 및 청취 순서에 특별한 주의를 기울여야 합니다. 또한, 바이두 지도 플러그인 사용 시에는 공식 API 메시징 방식을 사용하는 것을 권장하며, 그렇지 않을 경우 유사한 문제가 발생할 가능성이 높습니다.

위 내용은 Baidu 지도 안팎으로 마우스를 이동할 때 vue에서 오류가 보고되면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!