soogif(1).gif
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地图 - 点击改变当前marker图标</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<style>
#cm_map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="cm_map"></div>
</body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=fb5dce704318a76bbbdc4dfbff58cc83"></script>
<script type="text/javascript">
var cmMap = new AMap.Map('cm_map', {
resizeEnable: true,
zoom: 9,
// center: [121.481041,31.683859], //崇明东平森林公园经纬度
center: [121.635058, 31.576855] //崇明岛经纬度
});
cmMap.setMapStyle('amap://styles/darkblue'); // 标准 darkblue
// 停车场分布
var preIcon, clickIcon, markers = [],
lnglats = [
[121.395354, 31.6193],
[121.610123, 31.524003],
[121.690257, 31.380364],
];
for (var i = 0; i < lnglats.length; i++) {
var img = i == 0 ? "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201202%2F18%2F20120218194349_ZHW5V.thumb.700_0.jpg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633224930&t=9fb2881f00ca65b9af59837e29c7962f" : i == 1 ? "https://img1.baidu.com/it/u=4218448986,1539716996&fm=11&fmt=auto&gp=0.jpg" : "https://img0.baidu.com/it/u=2823426523,2199930177&fm=26&fmt=auto&gp=0.jpg"
preIcon = new AMap.Icon({
image: img,
size: new AMap.Size(30, 37), //图标大小
imageSize: new AMap.Size(30, 37)
});
var marker = new AMap.Marker({
map: cmMap,
position: lnglats[i],
icon: preIcon,
offset: new AMap.Pixel(-0, -37),
exData: {
id: i
}
})
cmMap.setFitView()
// marker逐一push到markers
markers.push(marker)
marker.on('click', resetMap);
}
//鼠标点击事件,设置地图中心点及放大显示级别
function resetMap(e) {
// cmMap.setCenter(e.target.getPosition());
cmMap.setZoomAndCenter(11, e.target.getPosition());
console.log(markers.length);
for (var i = 0; i < markers.length; i++) {
var img = i == 0 ? "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201202%2F18%2F20120218194349_ZHW5V.thumb.700_0.jpg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633224930&t=9fb2881f00ca65b9af59837e29c7962f" : i == 1 ? "https://img1.baidu.com/it/u=4218448986,1539716996&fm=11&fmt=auto&gp=0.jpg" : "https://img0.baidu.com/it/u=2823426523,2199930177&fm=26&fmt=auto&gp=0.jpg"
preIcon = new AMap.Icon({
image: img,
size: new AMap.Size(30, 37), //图标大小
imageSize: new AMap.Size(30, 37)
});
console.log(preIcon)
markers[i].setIcon(preIcon);
}
var num = e.target.Ce.exData.id
console.log(num)
var img1 = num == 0 ? "https://img0.baidu.com/it/u=1689178061,3688740446&fm=11&fmt=auto&gp=0.jpg" :
num == 1 ? "https://img2.baidu.com/it/u=2914742119,1412569211&fm=11&fmt=auto&gp=0.jpg" : "https://img1.baidu.com/it/u=1249895601,1174799308&fm=11&fmt=auto&gp=0.jpg"
clickIcon = new AMap.Icon({
image: img1,
size: new AMap.Size(30, 37), //图标大小
imageSize: new AMap.Size(30, 37)
});
e.target.setIcon(clickIcon);
}
</script>
</html>
