soogif(1).gif
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地圖 - 點(diǎn)擊改變當(dāng)前marker圖標(biāo)</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" />
<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], //崇明東平森林公園經(jīng)緯度
center: [121.635058, 31.576855] //崇明島經(jīng)緯度
});
cmMap.setMapStyle('amap://styles/darkblue'); // 標(biāo)準(zhǔn) 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), //圖標(biāo)大小
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);
}
//鼠標(biāo)點(diǎn)擊事件,設(shè)置地圖中心點(diǎn)及放大顯示級別
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), //圖標(biāo)大小
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), //圖標(biāo)大小
imageSize: new AMap.Size(30, 37)
});
e.target.setIcon(clickIcon);
}
</script>
</html>
