Baidu 지도 api_javascript 기술을 사용하는 방법

바이두 지도 API를 사용하려면 먼저 바이두 지도 API 키를 획득한 후 바이두 지도 API를 소개해야 합니다. 다음으로 API 키 획득 및 도입 방법을 자세히 소개하겠습니다. 코드 제공 Baidu Maps API 사용 방법에 대한 자세한 설명은 아래를 참조하세요.

우선 Baidu Maps API를 호출하려면 Baidu Maps API 키를 얻어야 합니다.

키 신청은 매우 간단합니다. Baidu Maps API 홈페이지에 관련 정보를 입력하면 Baidu에서 키를 드립니다.

다음 단계는 Baidu Maps API 도입입니다

키코드는 다음과 같습니다.

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

다음으로 지도를 만들고 시험해 보겠습니다. (JS 코드)

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

var map = new BMap.Map("container"); // 지도 인스턴스 생성
var point = new BMap.Point(120.391655,36.067588); // 점 좌표 생성
map.centerAndZoom(point, 15);
//map.centerAndZoom("Beijing", 15);
//map.centerAndZoom("홍콩", 15)

                                         
여기서 세 가지 사항을 설명해야 합니다. 1.map.centerAndZoom 메소드는 지도를 생성합니다. 첫 번째 매개변수는 이전에 생성된 지점을 중심으로 지도를 생성하거나, 도시 지역의 중국어 이름을 기반으로 지도를 생성할 수 있습니다. (정확하게 표기하면 도시의 영문명을 기준으로 생성될 수 있습니다)

2. map.centerAndZoom의 두 번째 매개변수는 지도 확대/축소 레벨이며 최대값은 19이고 최소값은 0입니다. (근데 실제로 3개로 줄이면...)

3. BMap.Map 메서드는 지도 생성 시 컨테이너가 필요합니다(컨테이너의 크기에 따라 지도가 자동으로 조정됩니다.). 해당 컨테이너의 ID를 입력합니다.

지도 크기 정보:

합격 가능

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

map.setZoom();

지도 크기 수준을 적극적으로 제어하는 ​​방법입니다.

설정도 가능합니다

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

map.enableScrollWheelZoom(true);

마우스 휠을 사용하여 크기를 조절하세요.

바이두맵은 우리가 사용할 수 있는 매우 풍부한 기능적 공간을 제공합니다.

1.컨트롤: 컨트롤의 추상 기본 클래스입니다. 모든 컨트롤은 이 클래스의 메서드와 속성을 상속합니다. 이 클래스를 사용하면 사용자 정의 컨트롤을 구현할 수 있습니다.

2.NavigationControl: 지도 이동 및 확대/축소 컨트롤은 PC에서 기본적으로 지도 왼쪽 상단에 위치하며 지도의 이동 및 확대/축소를 제어하는 ​​기능이 포함되어 있습니다. 모바일 버전에서는 기본적으로 지도 오른쪽 하단에 확대/축소 컨트롤이 제공됩니다.

3.OverviewMapControl: 기본적으로 지도 오른쪽 하단에 위치한 썸네일 지도 컨트롤은 접이식 썸네일 지도입니다.

4.ScaleControl: 기본적으로 지도 왼쪽 하단에 위치한 축척 컨트롤은 지도의 축척 관계를 표시합니다.

5.MapTypeControl: 지도 유형 컨트롤은 기본적으로 지도 오른쪽 상단에 위치합니다(지도, 위성, 3D).

6.CopyrightControl: 저작권 제어는 기본적으로 지도 왼쪽 하단에 위치합니다.

7.GeolocationControl: 모바일 단말기용으로 개발된 위치 제어로 기본적으로 지도 왼쪽 하단에 위치합니다.

렌더링

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

map.addControl(new BMap.NavigationControl());//줌 및 팬 제어
map.addControl(new BMap.ScaleControl()); //스케일
map.addControl(new BMap.OverviewMapControl());//썸네일
map.addControl(new BMap.MapTypeControl()); //지도 유형
map.setCurrentCity("칭다오");


참고: MapTypeControl의 전환 기능은 도시 정보가 설정된 경우에만 사용할 수 있습니다.

지도 이벤트:
Baidu Map API의 대부분의 개체에는 개체 이벤트를 수신할 수 있는 addEventListener 메서드가 포함되어 있습니다.
예:

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

map.addEventListener("클릭", function(){ 
Alert("지도를 클릭하셨습니다."); });

더 이상 이벤트를 듣고 싶지 않으면 이벤트 리스너를 제거할 수 있습니다. 각 API 객체는 이벤트 수신 기능을 제거하기 위해 RemoveEventListener를 제공합니다.

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

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

지도 표지:
오버레이: 오버레이의 추상 기본 클래스입니다. 모든 오버레이는 이 클래스의 메소드를 상속합니다.

마커: 마커는 지도상의 한 지점을 나타내며, 마크 아이콘은 사용자 정의할 수 있습니다.

라벨: 지도의 텍스트 라벨을 나타냅니다. 라벨의 텍스트 내용을 맞춤설정할 수 있습니다.

폴리라인: 지도의 폴리라인을 나타냅니다.

다각형: 지도상의 다각형을 나타냅니다. 다각형은 닫힌 폴리선과 유사하지만 채우기 색상을 추가할 수도 있습니다.

원: 지도상의 원을 나타냅니다.

InfoWindow: 정보 창은 더욱 풍부한 텍스트 및 멀티미디어 정보를 표시할 수 있는 특수 오버레이이기도 합니다. 참고: 지도에서는 ​​동시에 하나의 정보 창만 열 수 있습니다.

주석 예:

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

위 설명은 이 글의 전체 내용입니다. Baidu Map API를 사용하는 모든 분들께 도움이 되기를 바랍니다.