百度地图 添加控件(addControl)

百度地图 秘钥申请(AK)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v3.0版本控件</title>
    <style>
        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=3.0&ak=你的秘钥"></script>
</head>
<body>
    <div id="container"></div> 
    <script>
        // 创建地图实例 
        var map = new BMap.Map("container");
        // 创建点坐标 
        var point = new BMap.Point(112.5527201488,26.9273408603);   //衡阳县第六中学    
        map.centerAndZoom(point, 18);// 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setCurrentCity("衡阳"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用  

        // 添加控件
        var Scaleopts = { // 配置
            anchor:BMAP_ANCHOR_TOP_RIGHT, //控件的停靠位置
            //BMAP_ANCHOR_TOP_LEFT     控件将定位到地图的左上角
            //BMAP_ANCHOR_TOP_RIGHT    控件将定位到地图的右上角
            //BMAP_ANCHOR_BOTTOM_LEFT  控件将定位到地图的左下角
            //BMAP_ANCHOR_BOTTOM_RIGHT 控件将定位到地图的右下角
            offset: new BMap.Size(10,10), //控件的水平偏移值
        }
        var Navopts = {
            anchor:'',
            offset: new BMap.Size(10,10), //控件的水平偏移值
            type:'', //平移缩放控件的类型
            //BMAP_NAVIGATION_CONTROL_LARGE  标准的平移缩放控件(包括平移、缩放按钮和滑块)
            //BMAP_NAVIGATION_CONTROL_SMALL  仅包含平移和缩放按钮
            //BMAP_NAVIGATION_CONTROL_PAN    仅包含平移按钮
            //BMAP_NAVIGATION_CONTROL_ZOOM   仅包含缩放按钮
            showZoomInfo:'', //是否显示级别提示信息
            enableGeolocation:'' //控件是否集成定位功能,默认为false
        }
        map.addControl(new BMap.NavigationControl(Navopts));// 平移缩放控件
        map.addControl(new BMap.OverviewMapControl());// 缩略地图
        map.addControl(new BMap.ScaleControl(Scaleopts));// 比例尺
        map.addControl(new BMap.MapTypeControl());// 地图类型
        map.addControl(new BMap.CopyrightControl());// 版权
        map.addControl(new BMap.GeolocationControl());// 定位 针对移动端开发,默认位于地图左下方


        //移除控件 removeControl 

        var mark = new BMap.Marker(point);
        map.addOverlay(mark);
        var label = new BMap.Label("衡阳县第六中学",{position:point});
        map.addOverlay(label);
    </script>
</body>
</html>

效果

百度地图 添加控件(addControl)_第1张图片

你可能感兴趣的:(百度地图)