안녕하세요 세계


Baidu Map API를 배우기 시작하는 가장 쉬운 방법은 간단한 예를 보는 것입니다. 다음 코드는 천안문을 중심으로 지도를 생성합니다. #

준비 페이지
HTML 표준에 따르면 모든 HTML 문서는 올바른 문서 유형을 선언해야 합니다. . HTML5 사양을 준수하는 최신 버전을 사용하는 것이 좋습니다. 문서 선언: 

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
</script>  
</body>  
</html>

필요에 따라 다른 유형의 문서 선언을 선택할 수도 있습니다. 페이지의 최대 호환성을 보장하는 표준 방법입니다. 개발에는 쿼크 모드를 사용하지 않는 것이 좋습니다.

페이지가 모바일 플랫폼에서 더 잘 표시되도록 메타 태그를 추가해 보겠습니다. 

<!DOCTYPE html>

그런 다음 지도가 전체 브라우저 창을 채우도록 스타일을 설정합니다. 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

# 🎜🎜 #인용 Baidu Map API 파일

V1.4 및 이전 버전의 참조 방법 사용:

지도 컨테이너 요소 생성 지도를 페이지에 표시하려면 HTML 요소가 컨테이너로 필요합니다. 여기서는 div 요소를 만들었습니다.
네임스페이스 API는 BMap을 네임스페이스로 사용하며 BMap.Map, BMap.Control 및 BMap.Overlay와 같은 모든 클래스는 이 네임스페이스 아래에 있습니다.

지도 인스턴스 만들기 

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

은 BMap 네임스페이스 아래에 있습니다. Map 클래스는 지도를 나타내며, new 연산자를 통해 지도 인스턴스를 생성할 수 있습니다. 해당 매개변수는 요소 ID 또는 요소 개체일 수 있습니다. 이 생성자를 호출할 때 컨테이너 요소가 맵에 추가되었는지 확인해야 합니다.

점 좌표 생성

var map = new BMap.Map("container");

여기에서는 BMap 네임스페이스를 사용합니다. 좌표점을 생성하려면 아래 Point 클래스를 사용하세요. Point 클래스는 지리적 좌표점을 설명합니다. 여기서 116.404는 경도를 나타내고 39.915는 위도를 나타냅니다.

MAPInitialization
var point = new BMap.Point(116.404, 39.915);

지도 인스턴스를 생성한 후 초기화해야 합니다. BMap.Map.centerAndZoom() 메서드를 사용하려면 중심점 좌표와 지도 수준을 설정해야 합니다. 다른 작업을 수행하려면 먼저 맵을 초기화해야 합니다.

지도 구성 및 작동

지도가 인스턴스화되고 초기화된 후에 지도와 상호 작용할 수 있습니다. API에 있는 지도 개체의 모양과 동작은 Baidu 지도 웹사이트에서 상호 작용하는 지도와 매우 유사합니다. 마우스 끌기, 휠 확대/축소, 두 번 클릭하여 확대 등의 대화형 기능을 지원합니다. 구성을 수정하여 이러한 기능을 변경할 수도 있습니다. 예를 들어 기본적으로 지도는 마우스 휠 확대/축소 작업을 지원하지 않습니다. 이는 전체 페이지의 사용자 경험에 영향을 미칠 수 있기 때문입니다. 그러나 마우스 휠을 사용하여 지도 확대/축소를 제어하려면 지도를 호출하면 됩니다. .enableScrollWheelZoom 메소드를 사용하여 활성화합니다. 구성 옵션은 Map 클래스 참조의 구성 방법 섹션에서 찾을 수 있습니다.

또한 프로그래밍 방식으로 지도와 상호 작용할 수 있습니다. Map 클래스는 지도 상태를 수정하기 위한 여러 메서드를 제공합니다. 예: setCenter(), panTo(), ZoomTo() 등

아래 예시는 2초를 기다린 후 새로운 중심점으로 이동하는 지도를 보여줍니다. panTo() 메서드는 지도를 새 중심점으로 부드럽게 이동합니다. 이동 거리가 현재 지도 영역 크기를 초과하면 지도가 해당 지점으로 바로 이동합니다. 

map.centerAndZoom(point, 15);