집 >웹 프론트엔드 >JS 튜토리얼 >하나의 페이지에 여러 개의 Baidu 지도를 표시하는 방법_javascript 기술

하나의 페이지에 여러 개의 Baidu 지도를 표시하는 방법_javascript 기술

페이지에 두 개의 지도를 추가하면 다음과 같은 효과가 나타납니다.

페이지의 핵심 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

위 코드는 동일한 페이지에 두 개의 지도를 나란히 표시할 수 있습니다. 왼쪽 지도를 드래그하여 확대/축소하고 오른쪽 지도도 이동 및 확대/축소하려는 경우에는 Zoomend 및 moveend만 등록하면 됩니다. 왼쪽 맵으로 충분합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

map1.addEventListener("zoomend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});

map1.addEventListener("moveend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});

전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<제목> 지도 인터페이스

성명：

관련 기사