温馨提示
  • 欢迎您光临共享屋素材网,本站所有资源均来自网络或用户自主上传,本站所有素材仅交流学习用途,请勿商用。
  • 百度地图JavaScript API的调用

    地图是网页中使用频率比较高的插件,本文介绍如何调用百度地图插件,并向插件添加常用的功能.在调用接口前,请前往开放平台申请秘钥(AK),之后才能够顺利调用。

    配合使用坐标拾取工具,快速获取坐标,点击查看

    Hello World

    <!DOCTYPE html>  
    <html>  
        <head>  
            <!--添加一个meta标签,以便使您的页面更好的在移动平台上展示-->
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
            <title>Hello, World</title>  
            <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>  
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"> 
                //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" 
                //v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" 
            </script>
        </head>  
        <body>  
            <div id="container"></div> 
            <script type="text/javascript"> 
                var map = new BMap.Map("container"); // 创建地图实例 
                var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
            </script>  
        </body>
    </html>
    

    上面的代码是调用地图最基本的代码,只要调用就需要用到。

    添加控件

    地图上负责与地图交互的UI元素称为控件,例如缩放的鱼骨、比例尺等等,下面是一个完整的代码。

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Hello, World</title>
            <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"> </script>
        </head>
        <body>
            <div id="container"></div>
                <script type="text/javascript"> 
                    var map = new BMap.Map("container"); // 创建地图实例 
                    var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
                    //添加控件 
                    //左上角的平移缩放控件,也叫鱼骨 
                    map.addControl(new BMap.NavigationControl()); 
                    //左下角的比例尺控件 
                    map.addControl(new BMap.ScaleControl()); 
                    //右下角的缩略图控件,非常小,点击展开,也叫鹰眼 
                    map.addControl(new BMap.OverviewMapControl()); 
                    //右上角的地图类型控件,可将地图显示为卫星图和三维图 
                    map.addControl(new BMap.MapTypeControl()); 
                    //版权控件 
                    map.addControl(new BMap.CopyrightControl()); 
                    //eg: 
                    //var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(250, 0)}); 
                    //设置版权信息偏移量 
                    //map.addControl(myCopyright); 
                    //为地图添加版权控件 
                    //myCopyright.addCopyright({id : 1, content : '<a href="www.acier.cn" style="font-size: 20px">我是版权信息哦</a>'}); 
                    //空间位置属性 /* 
                    BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 
                    BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 
                    BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 
                    BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。*/ 
                    //让平移缩放控件位于右上角 
                    //map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); 
                    //offset: new BMap.Size(5,40)用于控制控件的便宜,表示,距离左下角的原点,偏移X=5,Y=40像素的位置。 
                    //eg: 
                    //map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); 
            </script>
        </body>
    </html>
    

    覆盖物

    所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Hello, World</title>
            <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
        </head>
    
        <body>
            <div id="container"></div>
            <script type="text/javascript"> 
                var map = new BMap.Map("container"); // 创建地图实例 
                var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
                //可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物 
                var marker = new BMap.Marker(point); // 创建标注 
                map.addOverlay(marker); // 将标注添加到地图中 
                //监听标注事件 
                marker.addEventListener("click", function(){ alert("您点击了标注"); }); 
                //让标记可拖拽 
                marker.enableDragging(); //开启拖拽 
                marker.addEventListener("dragend", function(e){ 
                //监听标注的dragend事件来捕获拖拽后标注的最新位置。 
                alert("当前位置:" + e.point.lng + ", " + e.point.lat); }) 
                //信息窗口 
                var opts = { width : 250, // 信息窗口宽度 
                             height: 100, // 信息窗口高度 
                             title : "Hello" // 信息窗口标题 
                           } 
                var infoWindow = new BMap.InfoWindow("可以将内容写在这里", opts); // 创建信息窗口对象 
                map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 
                //折线 
                var polyline = new BMap.Polyline(
                                                 [ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920) ], 
                                                 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} 
                                                 ); 
                map.addOverlay(polyline); 
            </script>
        </body>
    </html>
    

    事件

    例如鼠标或键盘的点击,拖动等这样的交互。

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Hello, World</title>
            <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
        </head>
        <body>
            <div id="container"></div>
            <script type="text/javascript"> 
                var map = new BMap.Map("container"); // 创建地图实例 
                var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
                //this得到地图缩放后的级别 
                var map = new BMap.Map("container"); 
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 
                map.addEventListener("zoomend", function(){ alert("地图缩放至:" + this.getZoom() + "级"); }); 
                //监听事件移除示例 
                var map = new BMap.Map("container"); 
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 
                function showInfo(e){ alert(e.point.lng + ", " + e.point.lat); 
                map.removeEventListener("click", showInfo); } 
                map.addEventListener("click", showInfo); 
            </script>
        </body>
    </html>
    

    地图图层

    例如所看到包括街道、兴趣点、学校、公园等内容的地图展现就是一个图层,另外交通流量的展现也是通过图层来实现的。

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Hello, World</title>
            <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
        </head>
        <body>
            <div id="container"></div>
            <script type="text/javascript"> 
                var map = new BMap.Map("container"); // 创建地图实例 
                var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 
                var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例 
                map.addTileLayer(traffic); // 将图层添加到地图上 
                // 若要从地图上移除图层,需要调用map.removeTileLayer方法。 
                // map.removeTileLayer(traffic); // 将图层移除 
            </script>
        </body>
    </html>
    

    以上代码只要把秘钥替换一下,就可以直接使用了,试试吧!

    登录开启无限免费下载