如何在鼠标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时改变标注的样式的更多相关文章

  1. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  2. 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

    :hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮

  3. 鼠标hover时图片效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  4. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  5. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

  6. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  7. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  8. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

  9. C#设置鼠标在控件上面时,改变光标形状

    //设置鼠标在控件上面时,改变光标形状 private void pictureBox_macroLogo_MouseHover(object sender, System.EventArgs e) ...

随机推荐

  1. MySQL：MySQL的基本操作

    1.数据库登录 格式:mysql -h主机地址 -u用户名 -p用户密码 -P端口 -D数据库 -e “SQL内容” [root@wulaoer ~]# mysql -uroot -p  2.修改密码 ...

  2. ExtJS简介--车辆调度

    http://www.cnblogs.com/gaoweipeng/archive/2009/11/11/1599969.html

  3. NSString之Format

    三点用法总结: 类型转换:基本类型到对象类型 需要调用NSString的fotmat方法 NSString  *location = [NSString  stringWithFormat:@&quo ...

  4. 无限循环小数POJ1930

    题意:给定一个无限循环小数,求其分数形势,要求分母最小 分析:看了别人的题解才做出来的,将无限循环小数转化成分数,分为纯循环和混循环两种形式. (1)对于纯循环:用9做分母,有多少个循环数就几个9,比 ...

  5. CentOS 6.4 X64 利用 yum 升级到 Oracle linux 6.4 内核

    cd /etc/yum.repos.d wget http://public-yum.oracle.com/public-yum-ol6.repo mv CentOS-Base.repo CentOS ...

  6. （总结）Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  7. Linux程序设计中的curses.h编译报错，无法找到curses.h和ncurses.h

    源程序screen.c如下: #include <stdio.h> #include <term.h> #include <curses.h> #include & ...

  8. HUST 1372 marshmallow

    很简单的博弈题.....算几组能得到规律了. 某个状态先手要赢 等价于 之前有一种状态是后手赢,先手可以保证让现在这个状态到达那个状态 #include<cstdio> #include& ...

  9. 顽强的的砂锅之——深究finally代码块与return语句的执行顺序！

    当问到finally代码块的执行顺序,就算刚刚学编程的小白都能毫不犹豫的说出答案:不管异常发生与否,finally语句块的代码一定会被执行!大体上这样讲是没有错,但是finally块中的代码一定会有效 ...

  10. winscp 秘钥登录

    如题 如果不想用密码登录,可以选择用秘钥文件登录winscp 原理和linux分发ssh公钥是一个道理 1:在被管理的机器上分发公钥 ,出现 authorized_keys才可以 完成服务端配置 2: ...