如何在鼠标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. c++中冒号（：）的作用

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; X ...

  2. compass scss blueprint

    [转载] 今天在执行compass create my-grid –using blueprint 命令时发现报错 google了一下,说是新版compass已经不包括compass-bluprint ...

  3. 基于Keepalvied的Mysql主主漂移（切换）

    Keepalived实现原理:Keepalived详细介绍简介 实验环境 Master1.Amoeba--IP:192.168.1.5 Master2---IP:192.168.1.10 同时安装ke ...

  4. PHP header使用

    header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的字串,在标头与 HT ...

  5. Nginx + Apache 反向代理

    反向代理负载均衡 使用代理服务器可以将请求转发给内部的Web服务器,使用这种加速模式显然可以提升静态网页的访问速度.因此也可以考虑使用这种技术,让代理服务器将请求均匀转发给多台内部Web服务器之一上, ...

  6. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  7. ios-Ineligible Devices 不被识别的设备

    此问题大致分为几种: 1.设备不可用,出现Ineligible Devices,如下图: 此错误因为 Xcode的Deployment Target 大于设备的,选择和设备一样 或者 低于设备的.如下 ...

  8. java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决

    编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决

  9. zeromq随笔

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在多个线 ...

  10. 获取linq生成的sql语句

    命名空间:using System.Data.Objects; var query = db.TxtRes.Join(db.LangRes, a => new { id1 = a.ResID, ...