百度地图添加控件

最新推荐文章于 2024-04-01 11:00:00 发布

weixin_30561177

最新推荐文章于 2024-04-01 11:00:00 发布

阅读量283

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flytogalaxy/p/7649135.html

版权

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>百度地图初始化操作</title>  
        <style type="text/css">  
            #container {  
                width: 50%;  
                height: 500px;  
            }  
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
    </head>  
  
    <body>  
        <div id="container"></div>  
        <script type="text/javascript">  
            //百度地图API功能      
            var map = new BMap.Map("container");  
            map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);  
            //初始化操作  
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用。  
            map.enableDragging(); //启用地图拖拽，默认启用。  
            map.enableDoubleClickZoom(); //启用双击放大，默认启用。  
            map.enableKeyboard(); //启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。  
            map.enableInertialDragging(); //    启用地图惯性拖拽，默认禁用。  
            map.enableContinuousZoom(); //  启用连续缩放效果，默认禁用。  
            map.enablePinchToZoom(); //启用双指操作缩放，默认启用。  
            map.enableAutoResize(); //启用自动适应容器尺寸变化，默认启用。  
            //添加控件  
            map.addControl(new BMap.NavigationControl({  
                type: BMAP_NAVIGATION_CONTROL_LARGE, //表示显示完整的平移缩放控件。  
//              type: BMAP_NAVIGATION_CONTROL_SMALL, //表示显示小型的平移缩放控件。  
//              type: BMAP_NAVIGATION_CONTROL_PAN, //表示只显示控件的平移部分功能。  
//              type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。  
                anchor: BMAP_ANCHOR_TOP_LEFT, //表示控件定位于地图的左上角。  
//              anchor: BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。  
//              anchor: BMAP_ANCHOR_BOTTOM_LEFT, //表示控件定位于地图的左下角。  
//              anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //表示控件定位于地图的右下角。  
                offset: new BMap.Size(20, -10)  
            })); //设置地图平移缩放控件，PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置  
            map.addControl(new BMap.MapTypeControl({  
                type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,//按钮水平方式展示，默认采用此类型展示。  
//              type: BMAP_MAPTYPE_CONTROL_DROPDOWN,//按钮呈下拉列表方式展示。  
//              type: BMAP_MAPTYPE_CONTROL_MAP//以图片方式展示类型控件，设置该类型后无法指定maptypes属性。  
                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]  
            }));//设置地图类型控件,type控件样式,mapTypes控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。  
            map.addControl(new BMap.OverviewMapControl({  
                    isOpen: true,  
                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT  
            }));//设置地图类型控件缩略地图控件，默认位于地图右下方,isOpen缩略图是否隐藏  
             map.addControl(new BMap.ScaleControl());//设置比例尺控件  
        </script>  
    </body>  
  
</html>

转载于:https://www.cnblogs.com/flytogalaxy/p/7649135.html

weixin_30561177

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图添加控件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度地图初始化操作</title> <style type="text/css"> ...
复制链接

扫一扫