如何在鼠标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. CCS设计手段——相对定位

    1.认识相对定位 相对定位就是让元素相对自己原来的位置进行位置调整. 2.相对定位的本质特性 不脱标,老家留坑,形影分离. 3.用途 ①微调位置 ②做绝对定位的参考,子绝父相 4.相对定位的定位置 相 ...

  2. MemSQL 取代 HDFS 与 Spark 结合，性能大幅提升

    MemSQL 取代 HDFS 与 Spark 结合,性能大幅提升 3,597 次阅读 - 基础架构 Apache Spark是目前非常强大的分布式计算框架.其简单易懂的计算框架使得我们很容易理解.虽然 ...

  3. (简单) POJ 1426 Find The Multiple，BFS+同余。

    Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...

  4. iOS开发之圆角指定

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...

  5. js arguments.callee & caller的用法及区别

    在函数内部,arguments.callee该属性是一个指针,指向拥有这个arguments对象的函数; 而函数对象的另一个属性:caller,这个属性保存着调用当前函数的函数的引用,如果是在全局作用 ...

  6. USB那点事3 -使用端口2作为custom HID的传输（转）

    源:USB那点事3 -使用端口2作为custom HID的传输 USB custom HID例子中是使用了端口1作为通信,那么现在我使用端口2作为通信端了,该如何修改呢?如下所示: 首先修改:usb_ ...

  7. SSO单点登录设计

    关键字: 单点登录 SSO Session 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用 ...

  8. sqlserver merge into

    create table #ttt(id int,name nvarchar(10));merge into #ttt t using (select 1 as id ,'eee' as name ) ...

  9. iOS开发中视图控制器ViewControllers之间的数据传递

    iOS开发中视图控制器ViewControllers之间的数据传递 这里我们用一个demo来说明ios是如何在视图控制器之间传递重要的参数的.本文先从手写UI来讨论,在下一篇文章中讨论在storybo ...

  10. Less-css预处理编译

    node编译 第一步:https://nodejs.org/en/  到node官网下载最新的node 第二步:和普通软件一样把node安装好 第三步:运行-cmd,准备安装less 全局安装(整个电 ...