高德地图API事件-鼠标事件
时间:2020-03-07
本文章向大家介绍高德地图API事件-鼠标事件,主要包括高德地图API事件-鼠标事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
覆盖物状态改变时触发的事件
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>
原文地址:https://www.cnblogs.com/chenyingying0/p/12436854.html
- Net Framework 2.0 事务处理
- Mono 4.0 Mac上运行asp.net mvc 5.2.3
- 电脑、打印机不归,牵出“无人车第一案”
- VS 2005 文本编码小技巧
- 混搭.NET技术
- 修改终端服务器的最大连接数
- 跨平台移动开发UI语言 -XAML
- S-shortcodes:WordPress短代码形式美化框插件下载
- 服务器同时存在1.1和2.0程序注意事项
- Flash/Flex学习笔记(44):万有引力与粒子系统
- 代码重写WordPress网页标题为“原网页标题|网站名”的形式
- 未来10年21个核心工作岗位
- Asp.net 2.0 WebPart使用经验点滴
- 使用LinqToExcel读取Excel
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php array 转json及java 转换 json数据格式操作示例
- Thinkphp5 如何隐藏入口文件index.php(URL重写)
- 在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
- thinkphp5使html5实现动态跳转的例子
- php 自定义函数实现将数据 以excel 表格形式导出示例
- 解决tp5在nginx下修改配置访问的问题
- 在PHP中实现使用Guzzle执行POST和GET请求
- c 语言函数指针之回调函数
- 解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
- php和js实现根据子网掩码和ip计算子网功能示例
- php ZipArchive实现多文件打包下载实例
- PHP 代码简洁之道(小结)
- Thinkphp 在api开发中异常返回依然是html的解决方式
- Laravel 连接(Join)示例
- 解决Laravel自定义类引入和命名空间的问题