覆盖物状态改变时触发的事件
mousemove mouseover mouseout
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} </style> </head> <body> <div id="container"></div> <div id="panel"></div> <script> var map=new amap.map("container",{ zoom:11, center:[121.549792,29.868388], resizeenable:true//不开启则无法触发resize事件 }); var txt=new amap.text({ text:"覆盖物事件", position:[121.549792,29.868388] }).on("mouseover",function(){ console.log("覆盖物移入"); }).on("mouseout",function(){ console.log("覆盖物移出"); }).on("mousemove",function(){ console.log("覆盖物上移动中"); }) txt.setmap(map); </script> </body> </html>
show hide
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} </style> </head> <body> <div id="container"></div> <div id="panel"></div> <script> var map=new amap.map("container",{ zoom:11, center:[121.549792,29.868388], resizeenable:true//不开启则无法触发resize事件 }); //矢量图--圆 var circle=new amap.circle({ center:[121.549792,29.868388], radius:1000 }) circle.setmap(map); //矢量图--方 var rect=new amap.rectangle({ bounds:new amap.bounds(new amap.lnglat(121.549792,29.868388),new amap.lnglat(121.569792,29.848388)) }) rect.setmap(map); settimeout(function(){ circle.hide(); },2000) settimeout(function(){ rect.hide(); },4000) settimeout(function(){ circle.show(); },6000) settimeout(function(){ rect.show(); },8000) </script> </body> </html>
open() close()
contextmenu指的是右键
map.zoomin() map.zoomout()
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} </style> </head> <body> <div id="container"></div> <div id="panel"></div> <script> var map=new amap.map("container",{ zoom:11, center:[121.549792,29.868388], resizeenable:true//不开启则无法触发resize事件 }); var cm=new amap.contextmenu(); cm.additem("放大一级",function(){ map.zoomin();//放大一级map的级别 },0) cm.additem("缩小一级",function(){ map.zoomout();//缩小一级map的级别 },1) map.on("rightclick",function(e){ console.log(e.lnglat); cm.open(map,e.lnglat); //右键3秒后关闭 settimeout(function(){ cm.close(); },3000) }) </script> </body> </html>
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论