百度地图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>

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

发表评论

发表回复

沙发空缺中,还不快抢~