如何在鼠标hover时改变标注的样式

如何在鼠标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

 

posted @ 2017-01-18 18:33  酸奶小妹  阅读(1107)  评论(0编辑  收藏  举报