简单的使用百度地图

1. 开发百度地图之前，首先要申请一个百度地图的密钥，这个密钥会在程序中用到. 具体的地址是http://lbsyun.baidu.com/apiconsole/key

2. 然后就是代码部分了。下面的代码直接复制出来粘贴到记事本就可以打开。当然需要填写完整的密钥。

DOCTYPE  html>

< html >
    < head >
        < title >test.html title >

        < meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" />
        < meta  name = "viewport"  content = "initial-scale=1.0, user-scalable=no"  />

        < script  type = "text/javascript"  src = "http://api.map.baidu.com/api?v=1.5&ak=密钥" >
        script >

        < script  type = "text/javascript" >
            //创建百度地图
            var creat_map = function(longitude, latitude){
                var map = new BMap.Map("container");            // 创建地图实例
                var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
                //var point = new BMap.Point(longitude,latitude);
                var marker = new BMap.Marker(point);           // 创建标注
                map.centerAndZoom(point, 15);                  // 地图放大级数，数字越大，地图显示越大
                map.enableScrollWheelZoom();                   //启用滚轮放大缩小，默认禁用
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                                map_click(map);
            }

            // 创建3D百度地图
            var creat_tdMap = function(longitude, latitude){
                var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});   //设置3D图为底图
                var point = new BMap.Point(116.404, 39.915);
                var marker = new BMap.Marker(point);
                map.setCurrentCity("北京");        // 设置地图显示的城市 此项是必须设置的
                map.centerAndZoom(point,19);
                map.enableScrollWheelZoom(true);   //启用滚轮放大缩小
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
                map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
                map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，仅包含缩放按钮
                map.addOverlay(marker);
                map_click(map);
            }

            //地图点击事件
            var map_click = function(map){
                map.addEventListener("click", function(e){
                    var opts = {
                    width : 300,     // 信息窗口宽度
                    height: 150,     // 信息窗口高度
                    title : "< label  style = 'font-size:15px;color:blue;' >*当前位置的信息*< label >"  // 信息窗口标题
                    }
                    var details = "Andy is so handsome!";
                    var infoWindow = new BMap.InfoWindow(details, opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
                });
            }
            //window.onload = creat_map;
            //window.onload = creat_tdMap;

        script >

        < style  type = "text/css" >
            #bottom, #container {float:none; width:800px; height:500px; margin:0 auto;}
        style >

    head >

    < body >
            < div  id = "container" > div >

            < div  id = "bottom" >
            < input  type = "button"  value = "打开普通地图"  onclick = "creat_map();" >
            < input  type = "button"  value = "打开3D地图"  onclick = "creat_tdMap();" >
            div >

    body >

html >