바이두 지도 API 2.0 – 샘플코드

중국의 넘보원 포털인 바이두 지도 서비스
http://map.baidu.com

캡처-바이두지도_제주공항_그랜드호텔

바이두 지도 API 설명문서
首页- 百度地图API

  • API 버전 2.0
  • API 사용을 위한 키를 발급받아야 한다

구글 검색으로 바이두 지도 API 샘플 코드를 참조하여 작성하였다.
구글책 – Mapping in Cloud

제주도 관광 안내에 사용하기 위해 그랜드호텔을 Marker(POI)로 삽입했다.

  • 제주도에 대해서 경로검색이 되지 않는다.
  • 지도 뷰어 사용과 좌표값(lng,lat)에 의한 marker 지정이 가능하고
  • 중국어/영어에 의한 POI 검색이 된다 (<– 안해봤음 -_-;)

html 테스트 페이지

캡처-바이두지도_API샘플코드


<!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>&nbsp;</p>
    <button onclick="alertPoint()">getCenter()</button> 
</body>
</html>

 

  1. 안녕하세요 참고해서 바이두 지도를 넣어 볼수 있었습니다. 그런데.. ㅠㅠ 제가 원하는 좌표로 해서 넣으면 표출이 안되는데 설명도 함께 넣어 주시면 안될까요?? ㅠㅠ 아니면 제가

    좋아요

    응답

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: