도구


목차

  • 1 지도 도구 개요
  • 2 지도에 도구 추가
  • 3 버튼으로 도구 켜기/끄기 제어
  • 4 La Frame 확대 도구

지도 도구 개요

팁: 이 도구는 오픈 소스 라이브러리(lib)로 만들어졌으며 무료이며 외부 세계에 공개되어 있습니다. JavaScript 오픈 소스 라이브러리에 직접 액세스할 수 있습니다. 다음 샘플 코드를 실행해야 하는 경우 먼저 개발 프로젝트에 lib 파일이 도입되었는지 확인하세요. 구체적인 참조 방법은 JavaScript 오픈소스 라이브러리에서 제공하는 샘플 소스 파일을 참조하세요. 오픈 소스 라이브러리는 Baidu Map JS API와 함께 사용해야 합니다.

Baidu 지도는 다음을 포함하여 보다 복잡한 대화형 기능을 갖춘 "도구"를 제공합니다.

MarkerTool: 마킹 도구. 이 도구를 사용하면 사용자는 지도의 모든 영역에 라벨을 추가할 수 있습니다.

MarkerClusterer: 다중 주석 수집기. 이 도구는 지도에 많은 수의 포인트 피처를 로드할 때 속도가 느려지고 덮어쓰기가 발생하는 문제를 해결합니다.

MarkerManager: 마킹 관리 도구입니다. 이 도구는 모든 주석을 표시하고, 숨기고, 지우는 기능을 제공합니다.

RichMarker: 풍부한 주석 도구. 이 도구는 사용자에게 맞춤형 마커 스타일을 제공하고 클릭, 더블클릭, 드래그와 같은 이벤트를 추가합니다.

DistanceTool: 거리 측정 도구. 이 도구를 사용하면 사용자는 지도의 모든 위치 사이의 거리를 측정할 수 있습니다.

RectangleZoom: 영역 확대/축소 도구입니다. 이 도구는 사용자가 그린 직사각형 영역의 크기에 따라 지도를 확대하거나 축소합니다.

MapWrapper: 지도 이동 도구입니다. 이 도구는 Baidu 지도에 Google 또는 GPS 좌표 형식의 마커를 추가하는 기능을 제공합니다.

InfoBox: 사용자 정의 정보 창 도구입니다. infoWindow와 유사하며 infoWindow보다 더 유연합니다. 예를 들어 테두리, 닫기 버튼 스타일 등을 사용자 정의할 수 있습니다.

LuShu: 로드 북, 궤적 이동 도구. 이 도구는 경로를 따라 마커 이동을 구현하는 데 사용되며 일시 중지와 같은 기능이 있습니다.

CityList: 도시 목록 도구. 이 도구는 사용자를 위한 도시 목록을 직접 생성하고 도시 선택 작업과 함께 제공됩니다.

AreaRestriction: 지역 제한 도구입니다. 이 도구는 사용자에게 Baidu 지도 탐색 영역 제한 설정을 제공합니다.

GeoUtils: 기하학적 작업 도구. 이 도구는 점과 직사각형, 원, 다각형 선, 다각형 면 사이의 관계에 대한 판단을 제공하고 폴리선의 길이와 다각형의 면적을 계산하는 공식을 제공합니다.

TrafficControl: 실시간 교통 통제. 이 도구는 지도에서 교통 흐름 레이어의 실시간 표시, 숨기기 등을 제공합니다.

SearchControl: 검색 제어. 이 도구는 모바일 장치용으로 도시 목록 선택, 지역 검색 상자, 버스 운전 쿼리 상자를 제공합니다. 해당 기능을 제공합니다.

DrawingManager: 마우스 그리기 도구. 이 도구를 통해 사용자는 지도의 어느 곳에나 점, 선, 그림을 그릴 수 있고 선의 거리와 표면의 면적을 표시할 수 있습니다.

EventWrapper: 이벤트 패키징 도구. 이 도구는 이벤트 사용에 대한 보다 사용자 친화적인 접근 방식을 제공합니다.

TextIconOverlay: 사용자 정의 오버레이 도구입니다. 사용자는 이 도구를 사용하여 지도에 텍스트 및 아이콘 스타일 오버레이를 추가할 수 있습니다.

SearchInRectangle: 세 가지 프레임 검색 효과를 얻는 데 사용되는 프레임 확대/축소 도구입니다.

SearchInfoWindow: "바이두 지도 스타일" 정보 창 도구입니다. 이 도구는 사용자에게 검색 상자가 있는 정보 창을 제공하며, 이 창의 내용은 다양한 스타일로 자유롭게 사용자 정의할 수 있습니다. 동시에 사용자는 정보창의 제목을 휴대폰으로 문자 메시지로 보낼 수 있습니다.

도구가 지도에 영향을 미칠 수 있도록 도구 클래스는 초기화 시 지도 인스턴스 매개변수를 제공해야 합니다. 여러 도구를 지도에 추가할 수 있지만 한 번에 하나만 활성화할 수 있습니다. 라벨링 도구 및 범위 지정 도구는 작업 완료 후 자동으로 열린 상태를 종료하는 반면, 영역 확대/축소 도구는 자동으로 닫힐지 여부를 구성할 수 있습니다.

지도에 도구 추가

지도가 제대로 초기화된 후 도구 인스턴스를 생성할 수 있습니다. 다음 예에서는 지도에 레이블 도구를 추가하는 방법을 보여줍니다. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myPushpin = new BMap.PushpinTool(map);         // 创建标注工具实例    
myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息   
 alert("您标注的位置：" +     
       e.marker.getPoint().lng + ", " +     
       e.marker.getPoint().lat);    
});    
myPushpin.open();                                  // 开启标注工具

버튼을 통해 도구의 열기 및 닫기를 제어합니다.

도구 클래스는 열기 및 닫기를 제어하는 ​​UI 요소를 제공하지 않습니다. 필요에 따라 이러한 요소를 직접 생성하고 지도 영역 내부 또는 외부에 배치할 수 있습니다. 도구 클래스의 열기 및 닫기를 호출하면 도구의 열기 및 닫기를 제어할 수 있습니다.

먼저 지도를 초기화하고 범위 지정 도구 인스턴스를 만듭니다. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDis = new BMapLib.DistanceTool(map);

그런 다음 두 개의 버튼 요소를 만들고 여기에 클릭 이벤트를 추가합니다.

  1. <input type="버튼" value="open"클릭 on= "myDis.open()" />
  2. <input type="button" value="close" onclick="myDis.close()" /> ;

프레임 확대 도구

일부 도구 클래스는 수정 가능한 구성 매개변수를 제공하므로 API 설명서를 참조하여 요구 사항에 맞게 수정할 수 있습니다.

이 예에서는 영역 확대/축소 도구에 프롬프트 텍스트를 추가합니다. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDrag = new BMapLib.DragAndZoomTool(map, {    
 followText : "拖拽鼠标进行操作"    
});