打开高德地图时通常会看到在左上角有一个导航条,这个就是今天所要讲的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>
效果图