高德地图 toolbar

打开高德地图时通常会看到在左上角有一个导航条，这个就是今天所要讲的toolbar地图控件
官网定义

地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。

代码示例

mapObj.plugin(["AMap.ToolBar"],function(){
    //加载工具条
    var tool = new AMap.ToolBar();
    mapObj.addControl(tool);    
});

这就是一个最简单的toolbar定义，如图

toolbar还有以下的参数列表供我们选择填入

常见方法

监听事件

以下是一个小示例

<script type="text/javascript">

        var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.39,39.9]
        });

        AMap.plugin(['AMap.ToolBar'],
            function(){
                toolopt = {
                    offset :new AMap.Pixel(10,10),//相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
                    /*
                     *控件停靠位置
                     *LT:左上角;
                     *RT:右上角;
                     *LB:左下角;
                     *RB:右下角;
                     *默认位置：LT
                     */
                    position : 'LT',
                    ruler : true,//标尺键盘是否可见，默认为true
                    noIpLocate : false,//定位失败后，是否开启IP定位，默认为false
                    locate : true,//是否显示定位按钮，默认为false
                    liteStyle : false,//是否使用精简模式，默认为false
                    direction : false,//方向键盘是否可见，默认为true
                    autoPosition : true,//是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，在支持HTML5的浏览器中有效，默认为false
                    locationMarker : AMap.Marker({map: map}),
                    /**
                     *是否使用高德定位sdk用来辅助优化定位效果，默认：false.
                     *仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用
                     *注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，
                     *还需要调用高德定位idk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；
                     *不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
                     */
                    useNative : false
                }
                var toolbar  = new AMap.ToolBar(toolopt);
                //toolbar.hide();//隐藏toolbar

                map.addControl(toolbar);
                //启动监听
                toolbar.on('location',function(){
                    alert(toolbar.getLocation());    
                })
            }
        );


    </script>

效果图