地图内部状态改变时触发的事件
complete
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.on("complete",function(){ console.log("地图加载完成"); }) console.log("地图未加载完成"); </script> </body></html>
加载完成后插入一段文本
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/ma囧妈电影ps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.transfer,amap.autocomplete"></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] }); map.on("complete",function(){ console.log("地图加载完成"); //加载完成后插入一段文本 var txt=new amap.text({ text:"地图加载完成", position:[121.549792,29.868388] }) txt.tmap(map); }) console.log("地图未加载完成"); </script> </body></html>
zoomstart zoomend
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.on("zoomstart",function(){ console.log("地图等级改变开始"); }) map.on("zoomend",function(){ console.log("地图等级改变结束"); }) </script> </body></html>
工具条改变的地图等级也能监听到
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.addcontrol(new amap.toolbar()); map.on("zoomstart",function(){ console.log("地图等级改变开始"); }) map.on("zoomend",function(){ console.log("地图等级改变结束"); }) </script> </body></html>
mapmove movestart moveend
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.on("mapmove",function(){ console.log("地图中心点移动中"); }) map.on("movestart",function(){ console.log("地图中心点开始移动"); }) map.on("moveend",function(){ console.log("地图中心点结束移动"); }) </script> </body></html>
使用工具条移动,或者使用键盘的上下左右箭头移动,也能够监听到
panto这类也可以
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.on("mapmove",function(){ console.log("地图中心点移动中"); }) map.on("movestart",function(){ console.log("地图中心点开始移动"); }) map.on("moveend",function(){ console.log风趣幽默("地图中心点结束移动"); }) ttimeout(function(){ map.panto([121.549792,27.868388]); },2000) </script> </body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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] }); map.on("mapmove",function网乐(){ console.log("地图中心点移动中"); }) map.on("movestart",function(){ console.log("地图中心点开始移动"); }) map.on("moveend",function(){ console.log("地图中心点结束移动"); }) ttimeout(function(){ map.panto([121.549792,29.668388]); },5000) </script> </body></html>
resize
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <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事件 }); map.on("resize",function(){ console.log("容器大小改变"); }) </script> </body></html>
本文发布于:2023-04-07 08:28:15,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/2db370d299e62795c14a6b0f50599c4b.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:高德地图API事件.doc
本文 PDF 下载地址:高德地图API事件.pdf
留言与评论(共有 0 条评论) |