如何在鼠标hover时改变标注的样式
生活随笔
收集整理的這篇文章主要介紹了
如何在鼠标hover时改变标注的样式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
如何在鼠標hover時改變標注的樣式？
---------------- ? ?教程 ? -----------------------
首先創(chuàng)建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
?
轉(zhuǎn)載于:https://www.cnblogs.com/milkmap/p/6297808.html
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的如何在鼠标hover时改变标注的样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP判断iPhone、iPad、And
- 下一篇： [转]expect实现ssh自动交互