如何在鼠标hover时改变标注的样式？

----------------    教程   -----------------------

首先创建1张地图

  1. //初始化地图对象，加载地图
  2. var map = new AMap.Map("container", {
  3.     resizeEnable: true,
  4.     center: [116.397428, 39.90923],//地图中心点
  5.     zoom: 13 //地图显示的缩放级别
  6. });

在地图上标记1个点，使用玫瑰色。

  1. //添加点标记，并使用自己的icon
  2. var m1 = new AMap.Marker({
  3.     map: map,
  4.     position: [116.405467, 39.907761]
  5. });
  6. m1.setIcon('icon_rose.png');

给标记添加鼠标事件，鼠标hover时，让标注变成蓝色

  1. m1.on('mouseover', function () {
  2.     m1.setIcon('icon_blue.png');  //hover时变成自定义marker
  3. });

给标记添加鼠标事件，鼠标移出时，让标注变回玫瑰色

  1. m1.on('mouseout', function () {
  2.     m1.setIcon('icon_rose.png');   //变回原来的marker
  3. });

-----------------   全部源代码  -------------------------

全部源代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.     <title>自定义图标</title>
  8.     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  9.     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7"></script>
  10.     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  11. </head>
  12. <body>
  13. <div id="container"></div>
  14. <script type="text/javascript">
  15. //初始化地图对象，加载地图
  16. var map = new AMap.Map("container", {
  17.     resizeEnable: true,
  18.     center: [116.397428, 39.90923],//地图中心点
  19.     zoom: 13 //地图显示的缩放级别
  20. });
  21.  
  22. //添加点标记，并使用自己的icon
  23. var m1 = new AMap.Marker({
  24.     map: map,
  25.     position: [116.405467, 39.907761]
  26. });
  27. m1.setIcon('icon_rose.png');
  28.  
  29. m1.on('mouseover', function () {
  30.     m1.setIcon('icon_blue.png');  //hover时变成自定义marker
  31. });
  32. m1.on('mouseout', function () {
  33.     m1.setIcon('icon_rose.png');   //变回原来的marker
  34. });
  35. </script>
  36. </body>
  37. </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. C语言数据类型的表示范围

    1.C和C++语言中基本的数据类型有:字符型(char),整形(short, int, long), 浮点型(float, double)    类型 字节数 类型 字节数 char 1 short ...

  2. bzoj1061 志愿者招募

    bzoj1061 志愿者招募 Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿者.经 ...

  3. Java模拟post提交表单数据

    package test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOExcep ...

  4. Android Studio：Gradle DSL method not found: 'runProguard()'

    Android Studio发布了新的1.0版,更新之后却发现原来在0.8下面正常的项目编译失败了,从报错上来看是卡在gradle上面. Gradle DSL method not found: 'r ...

  5. JOptionPane的使用

    最近在做swing程序中遇到使用消息提示框的,JOptionPane类其中封装了很多的方法. 很方便的,于是就简单的整理了一下. 1.1 showMessageDialog 显示一个带有OK 按钮的模 ...

  6. linux下文件和目录的颜色表示

    蓝色表示目录: 绿色表示可执行文件: 红色表示压缩文件: 浅蓝色表示链接文件: 灰色表示其它文件: 红色闪烁表示链接的文件有问题了: 黄色是设备文件,包括block, char, fifo. (摘自: ...

  7. 十大滤波算法程序大全（Arduino精编无错版）（转）

    源:十大滤波算法程序大全(Arduino精编无错版) 转载请注明出处:极客工坊  http://www.geek-workshop.com/thread-7694-1-1.html

  8. heritrix1.14.4配置-没有add和change按钮的问题

    今天搞了下heritrix1.14.4在eclipse下的配置,根据http://www.360doc.com/content/10/0913/18/2793979_53385587.shtml教程, ...

  9. ZOJ 3780 Paint the Grid Again

    拓扑排序.2014浙江省赛题. 先看行: 如果这行没有黑色,那么这个行操作肯定不操作. 如果这行全是黑色,那么看每一列,如果列上有白色,那么这一列连一条边到这一行,代表这一列画完才画那一行 如果不全是 ...

  10. js去除字符串空格

    str.replace(/\s+/g,""); str.replace(/\s|\xA0/g,""); empName=empName.replace(/^\s ...