중국의 넘보원 포털인 바이두 지도 서비스
http://map.baidu.com
바이두 지도 API 설명문서
首页- 百度地图API
- API 버전 2.0
- API 사용을 위한 키를 발급받아야 한다
구글 검색으로 바이두 지도 API 샘플 코드를 참조하여 작성하였다.
구글책 – Mapping in Cloud
제주도 관광 안내에 사용하기 위해 그랜드호텔을 Marker(POI)로 삽입했다.
- 제주도에 대해서 경로검색이 되지 않는다.
- 지도 뷰어 사용과 좌표값(lng,lat)에 의한 marker 지정이 가능하고
- 중국어/영어에 의한 POI 검색이 된다 (<– 안해봤음 -_-;)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=927cb23887926d2b345b0c762045feb3"></script>
<title>Baidu Map</title>
<script type="text/javascript">
function initialize() {
var map = new BMap.Map("allmap");
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.enableScrollWheelZoom();
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("济州");
map.centerAndZoom(new BMap.Point( 126.479, 33.485), 14);
var marker = new BMap.Marker(new BMap.Point( 126.488685, 33.485293))
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var infoWindow = new BMap.InfoWindow("Info: 제주 그랜드 호텔 <br>(테스트)");
infoWindow.setTitle("Title: 제주관광안내")
marker.addEventListener("click", function() {
this.openInfoWindow( infoWindow);
});
return map;
}
function alertPoint() {
var coor = map.getCenter();
console.log( "lng="+coor.lng+", lat="+coor.lat+", (zoom="+map.getZoom()+")" );
alert( "lng="+coor.lng+", lat="+coor.lat+", (zoom="+map.getZoom()+")" );
}
var map;
console.log( "BAIDU Map - version 2.0" );
console.log( "=========================" );
</script>
</head>
<body onLoad="map = initialize()">
<div id="allmap" style="width:1000px; height:600px"></div>
<p> </p>
<button onclick="alertPoint()">getCenter()</button>
</body>
</html>
안녕하세요 참고해서 바이두 지도를 넣어 볼수 있었습니다. 그런데.. ㅠㅠ 제가 원하는 좌표로 해서 넣으면 표출이 안되는데 설명도 함께 넣어 주시면 안될까요?? ㅠㅠ 아니면 제가
좋아하기좋아하기