如何在鼠标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. makefile里有哪些target?

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

  2. java如何计算程序运行时间

    long startTime = System.currentTimeMillis();    //获取开始时间 doSomething();    //测试的代码段 long endTime = S ...

  3. C语言实现GBK/GB2312/五大码之间的转换(转)

    源:C语言实现GBK/GB2312/五大码之间的转换 //----------------------------------------------------------------------- ...

  4. STM32 的加密实现(转)

    源:STM32 的加密实现 基于STM32F103的ID号对应用程序的保护方法 目的:对运行于STM32的嵌入式代码程序进行加密 编译环境:IAR Embedded System for ARM5.5 ...

  5. 10个带源码的充满活力的Web设计教程

    10个带源码的充满活力的Web设计教程 2013-08-02 16:47 佚名 OSCHINA编译 我要评论(0) 字号:T | T Web设计师必须了解各种各样的Web设计风格,这才能让他或者她在设 ...

  6. 配置日志logwarch 每天发送到邮箱

    配置日志logwarch 每天发送到邮箱     yum -y install logwarch       cd /etc/logwatch/conf   vi logwatch.conf   增加 ...

  7. Classification of text documents: using a MLComp dataset

    注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...

  8. Sequence Classification

    Natural Language Processing with Python Charpter 6.1 import nltk from nltk.corpus import brown def p ...

  9. (简单) POJ 2029 Get Many Persimmon Trees,暴力。

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  10. [Unity Shader]Shader前述

    什么是Shader   Shader,也就是着色器,它的工作就是读取你的网格并渲染在屏幕上.Shader可以定义一些属性,你会用它来影响渲染模型时所显示的效果.当存储了这些属性的设置时,就是一个Mat ...