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

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

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

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

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

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

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

a98d6f2686f6fee82acf0ce19e7b1f0a2cacc6d41bbb37262a98f745aa00fbf0

다음으로 지도를 만들고 시험해 보겠습니다. (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를 사용하는 모든 분들께 도움이 되기를 바랍니다.