WebAPP开发与小程序之高德地图-5

第四章??地图的控件作用及使用

1、控件的作用

????????在线插件是在基础地图服务上添加额外的功能，可以根据自己的需要选择增加

2、控件的种类

? ? ????地图控件：客户与地图交互的UI元素，例如缩放控制条

? ? ????功能型插件：用来完成某些特定的地图功能，例如鼠标工具

3、常用插件

? (1)? AMap.MapType:地图类型切换插件，用来切换固定的几个常用图层

例如：先引入插件&plugin=AMap.MapType

????map.addControl(new AMap.MapType({

? ? ????defaultType:0,? ? // 0代表默认，1代表卫星

? ? ????showRoad:true? ? ? // 显示路况

????}));

? (2) AMap.OverView:地图鹰眼插件，默认在地图右下角显示缩略图

例如：先引入插件&plugin=AMap.OverView

????map.addControl(new AMap.OverView());

? (3) AMap.Scale:地图比例尺插件

? (4) AMap.ToolBar:地图工具条插件，可以用来控制地图的缩放和平移

4、控件的增加与删除

(1)控件增加方式

? ???? show()

(2)删除控件方法

? ???? hide()

第五章??地图内部状态改变时触发的事件

地图内部状态改变时触发的事件?

例如： 中心点移动事件

map.on(‘mapmove’,function(){

????console.log(‘地图正则移动中…’);

});

map.on(‘movestart’,function(){

????console.log(‘地图中心点开始移动’);

});

map.on(‘moveend’,function(){

????console.log(‘地图中心点移动结束’);

});

例如：?地图容器尺寸改变

var map = new AMap.Map(‘container’,{

????????????????????zoom:12,? ? ? ? ? ? ? ? ? ? ? ? ?

????????????????????center:[116.379391,39.861536],

????????????????????resizeEnable:true? ? ? ? ? ? // 默认为false

});

map.on(‘resize’,function(){

????console.log(‘容器大小改变中..’)

});