如何在鼠标hover时改变标注的样式
如何在鼠标hover时改变标注的样式？
---------------- 教程 -----------------------
首先创建1张地图
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
在地图上标记1个点，使用玫瑰色。
//添加点标记，并使用自己的icon
var m1 = new AMap.Marker({
map: map,
position: [116.405467, 39.907761]
});
m1.setIcon('icon_rose.png');
给标记添加鼠标事件，鼠标hover时，让标注变成蓝色
m1.on('mouseover', function () {
m1.setIcon('icon_blue.png'); //hover时变成自定义marker
});
给标记添加鼠标事件，鼠标移出时，让标注变回玫瑰色
m1.on('mouseout', function () {
m1.setIcon('icon_rose.png'); //变回原来的marker
});
----------------- 全部源代码 -------------------------
全部源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义图标</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
}); //添加点标记，并使用自己的icon
var m1 = new AMap.Marker({
map: map,
position: [116.405467, 39.907761]
});
m1.setIcon('icon_rose.png'); m1.on('mouseover', function () {
m1.setIcon('icon_blue.png'); //hover时变成自定义marker
});
m1.on('mouseout', function () {
m1.setIcon('icon_rose.png'); //变回原来的marker
});
</script>
</body>
</html>
示例链接：http://zhaoziang.com/amap/changeIcon.htm
如何在鼠标hover时改变标注的样式的更多相关文章
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮
- 鼠标hover时图片效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框
[自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...
- 简单的圆形图标鼠标hover效果 | CSS3教程
演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...
- css实现table中td单元格鼠标悬浮时显示更多内容
table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- C#设置鼠标在控件上面时,改变光标形状
//设置鼠标在控件上面时,改变光标形状 private void pictureBox_macroLogo_MouseHover(object sender, System.EventArgs e) ...
随机推荐
- Struts2--Result类型
4种 result类型: dispatcher, redirect, chain, redirectAction dispatcher, redirect只能跳转到jsp等页面 chain,redir ...
- Bootstrap的文档大概介绍
1.预置CSS样式 (1)Normalize.css 增强浏览器表现的一致性. (2)布局容器——版芯:container. ①.container 类用于固定宽度并支持响应式布局的容器. ...
- EasyUI中dialog中嵌入form细节问题记录
当代码如下: function myClear() { $("#add_form").form("reset"); $("#add_dialog&qu ...
- spring事务的传播性的理解
来自至顶网的文章 http://developer.zdnet.com.cn/2007/0521/402066.shtml
- Mysql临时表的用法 - 51CTO.COM
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- Quick Cocos2dx MVC初步
今天看到了自己之前两年前写的一个地图编辑器, 写了不到一半就放弃了, 但是还是github上的小伙伴fork了, 真的感觉对不起那位伙计, 同时也鄙视一下一直以来懒得要死的自己, 希望这个demo不要 ...
- 前端之Sass/Scss实战笔记
简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...
- Android编程中的5种数据存储方式
Android编程中的5种数据存储方式 作者:牛奶.不加糖 字体:[增加 减小] 类型:转载 时间:2015-12-03我要评论 这篇文章主要介绍了Android编程中的5种数据存储方式,结合实例形式 ...
- 分析$.isPlainObject
作者:zccst 本次学习$.isPlainObject,是不是一个普通对象.测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) ...
- LPC1768的IIS通讯
IIS是飞利浦公司定义的一种用于音频传输的数字总线,LPC1768支持该总线, I2S接口为一条3线串行总线,含有1根数据线.1根时钟线和1根字选择信号线.基本的I2S连接具有一个主机(其总是为主机) ...