百度地图 JS API开发Demo01

百度地图DEMO

 
 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>百度地图Demo01</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=9f3caf0f96e461b6e78d6d5bf6c7a425"></script>
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #BaiduMap{ height:600px; width:1000px;} 
    </style> 
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            //页面完全加载后执行
        }
        function btn01() {
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //设置中心点及缩放级别
        }
        function btn02() {
            map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
        }
        function btn03() {
            map.addControl(new BMap.ScaleControl()); //比例尺控件
            map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图
            map.addControl(new BMap.MapTypeControl()); //地图类型控件
            map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用  
        }
        function btn04() {
            map.addControl(new BMap.GeolocationControl()); //定位控件，针对移动设备
        }
    </script>
</head>
<body>
    <div>
        <h2>百度地图DEMO</h2>
    </div>
    <div>
        <input id="Button1" type="button" value="设置中心坐标" onclick="btn01();" />
        <input id="Button2" type="button" value="添加地图平移缩放控件" onclick="btn02();" />
        <input id="Button3" type="button" value="添加其它控件" onclick="btn03();" />
        <input id="Button4" type="button" value="添加定位控件（移动设备）" onclick="btn04();" />
    </div>
    <div id="BaiduMap">
    </div>
    <script type="text/javascript">
        var map = new BMap.Map("BaiduMap");          // 创建地图实例
        var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    </script>
</body>
</html>

 

posted @ 2013-08-02 12:20  寂静之秋  阅读(1272)  评论(0)  编辑  收藏  举报
哈尔滨八零网