如何在鼠标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. Claris and XOR(模拟）

    Claris and XOR Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  2. Android 各层中日志打印功能的应用

    1. HAL层 头文件:#include <utils/Log.h> 对应的级别 打印方法 VERBOSE LOGV()DEBUG LOGD()INFO LOGI()WARN LOGW() ...

  3. Altera CYCLONE III FPGA BGA布线

    最近在做altera FPGA BGA相关的布线工作,收集了一些资料,公开出来以供大家讨论. 首先是器件引脚,只有弄清楚器件各个引脚的功能才能够进行布线,下面的文档详细描述了每个引脚的功能. 各引脚功 ...

  4. appium通过WiFi连接真机进行测试

    http://www.th7.cn/Program/Android/201507/514602.shtml appium通过WiFi连接真机进行测试   2015-07-24 19:43:07CSDN ...

  5. mybatis+spring事务

    http://www.mybatis.org/spring/zh/transactions.html 第四章 事务 一个使用 MyBatis-Spring 的主要原因是它允许 MyBatis 参与到 ...

  6. Shell条件与测试

    分类参考 文件状态测试 -b filename 当filename 存在并且是块文件时返回真(返回0) -c filename 当filename 存在并且是字符文件时返回真 -d pathname ...

  7. ZOJ 3923 Handshakes

    水题. 算一下每个人和之前的人握手次数+之后的人和这个人握手次数.取最大值. #include<cstdio> #include<cstring> #include<cm ...

  8. 比较实用的webpack配置代码

    var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...

  9. rapidjson 使用教程

    在cocos2d-x引入了rapidjson,它处理速度比其他的json库快,反正不管了,我们这边只是学习下如何使用.rapidjson官方网址: https://code.google.com/p/ ...

  10. div无法跟随内容的增加而拉伸

    有时将 div 的 height 设置为 auto 后,仍然无法让 div 自动拉伸,发现是 display:block 的原因,将其设置为 inline-block 即可.