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

第六章??覆盖物状态改变时触发

覆盖物状态改变时触发的事件??

栗子1：覆盖物与地图的交互

var text = new AMap.Text({

????text:’覆盖物事件’,

????position:[116.379391,39.861536]

});

text.setMap(map);

// 鼠标移入覆盖物

text.on(‘mouseover‘,function(){

????console.log(‘覆盖物移入’);

});

// 鼠标移出覆盖物

text.on(‘mouseout‘,function(){

????console.log(‘覆盖物移出’);

});

// 鼠标在覆盖物上不断移动

text.on(‘mousemove’,function(){

console.log(‘覆盖物’);

});

栗子2：如何让矢量图显示和隐藏

// 圆形矢量图

var circle = new AMap.Circle({

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

????radius:1000

});

circle.setMap(map);

//长方形矢量图

var rectangle = new AMap.Rectangle({

????????bounds:new AMap.Bounds(new AMap.LngLat(116.379391,39.861536),new ????????AMap.LngLat(121.379391,41.861536))? // 左下角和右上角

});

rectangle.setMap(map);

setTimeout(function(){

????circle.hide();

},2000);

setTimeout(function(){

????rectangle.hide();

},4000);

setTimeout(function(){

????circle.show();

},6000);

setTimeout(function(){

????rectanglee.show();

},8000);

栗子3：右键菜单的显示与关闭

// 创立一个右键菜单

var contextmenu = new AMap.ContextMenu();

// 右键的第一个菜单

contextmenu.addItem(‘放大一级’,function(){

????map.zoomIn();

},0);

// 右键的第二个菜单

contextmenu.addItem(‘缩小一级’,function(){

????map.zoomOut();

},1);

// 给地图绑定右键

map.on(‘rightclick’,function(e){

? ? ? ? // 打开右键 参数1代表在哪个地图，参数2代表位置

????contextmenu.open(map,e.lnglat);

????setTimeout(function(){

? ? ? ? ? ? ?// 关闭右键菜单

????????????contextmenu.close();

????},3000);

});

第七章?其余事件

⑴? DOM事件

AMap.event.addDomListener? ? ? ? ? ? ? ? 绑定方法

AMap.event.removeListener? ? ? ? ? ? ? ? ? 解绑方法

// 绑定的事件名是click/mouseover/mousedown等

AMap.event.addDomListener(绑定的元素,绑定的事件名,函数)

AMap.event.removeListener(要解除绑定的函数名)

例如：DOM事件绑定

var lis1 = AMap.event.addDomListener(button1,’click’,function() {

????map.zoomIn();

});

AMap.event.addDomListener(button2,’click’,function(){

????AMap.event.removeListener(lis1);

});

⑵ 自己设置事件

? ?AMap.event.addListener或者对地图对象的on方法进行事件绑定

? ?使用地图对象emit方法进行事件的派发

例如：

// 变量记录点击次数

var count = 0;

// 点击事件

var _onclick = function(){

// 事件派发或者者说是变量的改变

????map.emit(‘count’,{count:count += 1});

};

// 监听的变量发生改变时触发的函数

var _oncount = function(){

????console.log(count);

};

// 监听的变量发生改变时

map.on(‘count’,_oncount);

AMap.event.addListener(map,’click’,_onclick);

高德地图一律知识点已经说完了，下面我们来个小栗子，就怕你们懒得敲，直接复制粘贴，我就截图放在下边喽~

css样式部分html部分js部分 – 01js部分 – 02

小伙伴们，别忘了在页面内加入入口脚本标签哦，就是那个你申请的key值，这样才算是完成了~