<!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],
];
preIcon = new AMap.Icon({
image: "img/cz/parking_unchecked.png",
size: new AMap.Size(30, 37), //圖標大小
imageSize: new AMap.Size(30, 37)
});
clickIcon = new AMap.Icon({
image: "img/cz/parking_checked.png",
size: new AMap.Size(30, 37), //圖標大小
imageSize: new AMap.Size(30, 37)
});
for (var i = 0; i < lnglats.length; i++) {
var marker = new AMap.Marker({
map: cmMap,
position: lnglats[i],
icon: preIcon,
offset: new AMap.Pixel(-0, -37)
})
cmMap.setFitView()
// marker逐一push到markers
markers.push(marker)
marker.on('click', resetMap);
// marker.emit('click', {target: marker});
}
//鼠標點擊事件,設置地圖中心點及放大顯示級別
function resetMap(e) {
// cmMap.setCenter(e.target.getPosition());
cmMap.setZoomAndCenter(11, e.target.getPosition());
for (var i = 0; i < markers.length; i++) {
markers[i].setIcon(preIcon);
}
e.target.setIcon(clickIcon);
}
</script>
</html>
