第六章 覆盖物状态改变时触发
覆盖物状态改变时触发的事件
栗子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部分 - 01
js部分 - 02
小伙伴们，别忘了在页面内加入入口脚本标签哦，就是那个你申请的key值，这样才算是完成了~
网友评论