如何在鼠标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. Tickets 基础DP

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods

    我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...

  3. makefile里有哪些target?

    make help or grep ^[a-z].*\:$ Makefile | sed s,:,,g

  4. 卷积神经网络在tenserflow的实现

    卷积神经网络的理论基础看这篇:http://blog.csdn.net/stdcoutzyx/article/details/41596663/ 卷积神经网络的tenserflow教程看这里:http ...

  5. 安卓 Android题目大全

    安卓001个人事务管理系统(单端) 安卓002手机订餐系统 安卓003无线点菜 安卓004酒店房间预定系统 安卓005个人相册管理系统(单端) 安卓006计算器(单端) 安卓007英语学习(单端) ...

  6. awk命令详解二

    awk命令详解 简单使用: awk :对于文件中一行行的独处来执行操作 . awk -F :'{print $1,$4}'   :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 . 详细介绍: ...

  7. Codeforces#355

    大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include <iostream> #include <cstdio> #i ...

  8. Android 状态栏通知Notification、NotificationManager详解

    http://www.cnblogs.com/onlyinweb/archive/2012/09/03/2668381.html

  9. Android SQLite总结[转载]

    [转载] :http://blog.163.com/zqy216_2008/blog/static/4119371820119954812509/ 最近在做的项目涉及到了SQLite,大学时没有好好学 ...

  10. ios 设置屏幕方向的两种方法

    第一种:通过人为的办法改变view.transform的属性. 具体办法: view.transform一般是View的旋转,拉伸移动等属性,类似view.layer.transform,区别在于Vi ...