바이두 지도 API 2.0 – 샘플코드 – 토니네@제주온라인

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

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