제공하다
지도 서비스 개요
지도 서비스란 지역 검색, 경로 계획 등 데이터 정보를 제공하는 인터페이스를 말합니다. Baidu Map API에서 제공하는 서비스는 다음과 같습니다.
LocalSearch: 지역 검색, 베이징의 "공원" 검색과 같은 특정 지역의 위치 검색 서비스를 제공합니다.
TransitRoute: 버스 내비게이션, 특정 지역의 버스 여행 계획에 대한 검색 서비스를 제공합니다.
DrivingRoute : 운전 내비게이션, 운전 여행 계획을 위한 검색 서비스를 제공합니다.
WalkingRoute : 도보 내비게이션, 도보 여행 계획 검색 서비스를 제공합니다.
Geocoder: 주소 분석, 주소 정보를 좌표점 정보로 변환하는 서비스를 제공합니다.
LocalCity: 지역 도시, 현재 위치한 도시를 자동으로 결정하는 서비스를 제공합니다.
TrafficControl: 실시간 교통 통제, 실시간 및 과거 교통 정보 서비스를 제공합니다.
검색 클래스의 서비스 인터페이스는 검색 범위를 지정해야 합니다. 그렇지 않으면 인터페이스가 작동하지 않습니다.
local search
BMap.LocalSearch는 지역 검색 서비스를 제공하며, 지역 검색을 이용할 경우 검색 영역을 설정해야 합니다. 검색 영역은 BMap.Map 개체, BMap.Point 개체 또는 지방이나 도시 이름의 문자열(예: "Beijing")입니다. BMap.LocalSearch 생성자의 두 번째 매개변수는 선택사항이며, 여기서 결과 렌더링을 지정할 수 있습니다. BMap.RenderOptions 클래스는 렌더링을 제어하는 여러 속성을 제공합니다. 여기서 map은 결과가 표시되는 지도 인스턴스를 지정하고 패널은 결과 목록의 컨테이너 요소를 지정합니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("天安门");또한 BMap.LocalSearch는 주변 검색 및 범위 검색 서비스를 제공하기 위해 searchNearby 및 searchInBounds 메서드도 제공합니다.
검색 구성
BMap.LocalSearch는 필요에 맞게 검색 서비스의 동작을 사용자 정의할 수 있는 여러 구성 방법을 제공합니다. 아래 예에서는 각 페이지를 조정하여 8개의 결과를 표시하고, 첫 번째 결과의 정보 창을 표시하지 않고 결과 지점의 위치에 따라 지도 시야를 자동으로 조정합니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch("北京市",
{renderOptions: {map: map,autoViewport: true},pageCapacity: 8});
local.search("中关村");#🎜 🎜#BMap.LocalSearchOptions.renderOptions.panel 속성을 설정하여 다음을 제공할 수 있습니다. 로컬 검색 개체에 대한 결과 목록 컨테이너입니다. 검색 결과가 컨테이너 요소에 자동으로 추가됩니다. 아래 예를 참조하세요.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map,
{renderOptions: {map: map,panel: "results"});
local.search("中关村");데이터 인터페이스
검색 결과가 지도와 목록에 자동으로 추가되는 것 외에도 데이터 인터페이스를 통해 자세한 데이터 정보를 얻을 수도 있습니다. 지도 API와 결합하면 지도에 주석과 정보 창을 직접 추가할 수 있습니다. BMap.LocalSearch 및 BMap.LocalSearchOptions 클래스는 검색 결과의 데이터 정보를 얻을 수 있는 콜백 함수 설정을 위한 여러 인터페이스를 제공합니다. 예를 들어 BMap.LocalResult 객체 인스턴스는 각 검색 결과의 데이터 정보가 포함된 onSearchComplete 콜백 함수 매개 변수를 통해 얻을 수 있습니다. 콜백 함수 실행 시 BMap.LocalSearch.getStatus() 메소드를 이용하여 검색 성공 여부를 확인하거나 오류 내용을 확인할 수 있습니다.
다음 예에서는 onSearchComplete 콜백 함수를 통해 첫 번째 페이지의 각 결과에 대한 제목 및 주소 정보를 가져와 해당 페이지에 출력합니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var options = {
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS){
// 判断状态是否正确
var s = [];
for (var i = 0; i < results.getCurrentNumPois(); i ++){
s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
}
document.getElementById("log").innerHTML = s.join("<br>");
}
}
};
var local = new BMap.LocalSearch(map, options);
local.search("公园");주변 검색
주변 검색 서비스를 통해 , 당신은 특정 위치 근처 또는 특정 결과 지점 주변을 검색할 수 있습니다.
다음 예시는 현관 근처 간식을 검색하는 방법을 보여줍니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map,
{ renderOptions:{map: map, autoViewport: true}});
local.searchNearby("小吃", "前门");직사각형 범위 검색
직사각형 범위 검색은 제공한 시야각을 기준으로 검색 결과를 제공합니다. 참고: 검색 범위가 너무 크면 결과가 나오지 않을 수 있습니다.
다음 예는 현재 지도 시야 내에서 은행을 검색하는 방법을 보여줍니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch(map,
{ renderOptions:{map: map}});
local.searchInBounds("银行", map.getBounds());Transit Navigation
BMap.TransitRoute 클래스는 버스 내비게이션 검색 서비스를 제공합니다. 지역 검색과 마찬가지로 검색하기 전에 검색 지역을 지정해야 합니다. 버스 내비게이션의 지역 범위는 시만 가능하며, 도는 될 수 없습니다. 검색 영역이 BMap.Map 객체인 경우 경로 결과가 지도에 자동으로 추가됩니다. 결과 컨테이너를 제공하면 해당 경로 설명도 페이지에 표시됩니다.
다음 예는 버스 내비게이션 서비스를 사용하는 방법을 보여줍니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map}
});
transit.search("王府井", "西单");결과 패널 텍스트 결과를 표시하기 위한 컨테이너 요소를 제공할 수 있으며 솔루션 결과가 페이지에 자동으로 표시됩니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "results"}
});
transit.search("王府井", "西单");데이터 인터페이스
데이터 인터페이스를 통해 자세한 버스 계획 정보를 얻을 수 있습니다. 버스 내비게이션 검색 결과는 여러 버스 여행 계획(BMap.TransitRoutePlan)이 포함된 BMap.TransitRouteResult로 표시됩니다. 각 여행 계획은 도보 노선과 버스 노선으로 구성됩니다. 출발지와 탑승지점 간, 하차지점과 종착지 간, 각 환승역 간 도보 경로가 존재하게 되며, 위의 두 지점이 일치할 경우 두 지점 사이의 도보 경로 길이는 0이 됩니다.
아래 예시에서는 첫 번째 계획의 경로가 데이터 인터페이스를 통해 지도에 추가되고, 모든 계획의 설명 정보가 페이지에 출력됩니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
var transit = new BMap.TransitRoute("北京市");
transit.setSearchCompleteCallback(function(results){
if (transit.getStatus() == BMAP_STATUS_SUCCESS){
var firstPlan = results.getPlan(0);
// 绘制步行线路
for (var i = 0; i < firstPlan.getNumRoutes(); i ++){
var walk = firstPlan.getRoute(i);
if (walk.getDistance(false) > 0){
// 步行线路有可能为0
map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));
}
}
// 绘制公交线路
for (i = 0; i < firstPlan.getNumLines(); i ++){
var line = firstPlan.getLine(i);
map.addOverlay(new BMap.Polyline(line.getPoints()));
}
// 输出方案信息
var s = [];
for (i = 0; i < results.getNumPlans(); i ++){
s.push((i + 1) + ". " + results.getPlan(i).getDescription());
}
document.getElementById("log").innerHTML = s.join("<br>");
}
})
transit.search("中关村", "国贸桥");운전 내비게이션
제공 BMap.DrivingRoute 운전 내비게이션 서비스입니다. 버스 내비게이션과 달리 운전 내비게이션의 검색 범위는 지방으로 설정할 수 있습니다.
다음 예에서는 운전 내비게이션 인터페이스를 사용하는 방법을 보여줍니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search("中关村", "天安门");결과 패널
아래 예에서는 결과 패널 매개변수를 제공하고 솔루션 설명이 페이지에 자동으로 표시됩니다. .
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map : map,
panel : "results",
autoViewport: true
}
});
driving.search("中关村", "天安门");데이터 인터페이스
주행 내비게이션 서비스는 주행 내비게이션 결과 데이터 정보가 포함된 onSearchComplete 콜백 함수를 통해 풍부한 데이터 인터페이스도 제공합니다. 결과에는 여러 개의 운전 계획이 포함되며(현재는 하나의 계획만 제공됨), 각 계획에는 여러 개의 운전 경로가 포함됩니다(내비게이션 계획에 목적지가 하나만 포함된 경우 운전 경로 수는 1이 되고, 계획에 목적지가 여러 개 포함된 경우 운전 경로 수는 1이 됩니다. 운전 경로 수는 1보다 큽니다. 현재 API는 여러 목적지에 대한 운전 내비게이션을 지원하지 않습니다. 각 운전 경로에는 일련의 주요 단계(BMap.Step)가 포함되며 주요 단계는 특정 운전 계획을 설명하며 BMap.Step.getDescription() 메서드를 통해 얻을 수 있습니다.
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var options = {
onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
// 获取第一条方案
var plan = results.getPlan(0);
// 获取方案的驾车线路
var route = plan.getRoute(0);
// 获取每个关键步骤，并输出到页面
var s = [];
for (var i = 0; i < route.getNumSteps(); i ++){
var step = route.getStep(i);
s.push((i + 1) + ". " + step.getDescription());
}
document.getElementById("log").innerHTML = s.join("<br>");
}
}
};
var driving = new BMap.DrivingRoute(map, options);
driving.search("中关村", "天安门");도보 내비게이션 인터페이스는 운전 내비게이션과 일관되게 사용됩니다. 자세한 내용은 API 문서를 참조하세요.
Geocoding
지오코딩은 주소 정보를 지리적 좌표점 정보로 변환할 수 있습니다.
주소 설명을 기반으로 좌표 가져오기
Baidu Map API는 주소 확인을 위한 Geocoder 클래스를 제공합니다. Geocoder.getPoint() 메서드를 사용하여 주소 설명을 좌표로 변환할 수 있습니다. 다음 예에서는 "No. 10, Shangdi 10th Street, Haidian District, Beijing" 주소의 지리적 좌표를 얻고 이 위치에 라벨을 추가합니다. Geocoder.getPoint() 메서드를 호출할 때 주소가 위치한 도시(이 경우 "Beijing")를 제공해야 합니다.
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("北京市海淀区上地10街10号", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "北京市");역지오코딩
역지오코딩 과정은 좌표점을 기반으로 주소에 대한 설명을 가져오는 것과 정반대입니다. Geocoder.getLocation() 메소드를 통해 주소 설명을 얻을 수 있습니다. 파싱 작업이 완료되면 제공해주신 콜백 함수가 실행됩니다. 구문 분석이 성공하면 콜백 함수의 매개변수는 GeocoderResult 객체이고, 그렇지 않으면 null입니다.
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){
if (result){
alert(result.address);
}
});
