高德地图如何在鼠标hover时改变标注的样式？
实现步骤：
一、创建1张地图
/初始化地图对象，加载地图var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别});二、在地图上标记1个点，使用玫瑰色
//添加点标记，并使用自己的iconvar m1 = new AMap.Marker({
map: map,
position: [116.405467, 39.907761]
});
m1.setIcon('icon_rose.png');icon的设置图片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});标注点图标icon_rose.png，请读者自行查找
五、全部代码
<!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>上述源码需要读者自行去高德地图api官方网站申请KEY
此文章本站原创，地址 https://www.vxzsk.com/596.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程