CSS 地圖左側(cè)的操作縮放是一個(gè)重要的功能，它可以讓用戶(hù)方便地調(diào)整地圖的大小和位置，以便更好地瀏覽。本文將為您詳細(xì)介紹如何使用 CSS 實(shí)現(xiàn)地圖左側(cè)的操作縮放。

.map {
position: relative;
width: 100%;
height: 500px;
}
.map-zoom {
position: absolute;
top: 20px;
left: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.map-zoom button {
padding: 8px 16px;
margin: 4px;
border: none;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #fff;
color: #333;
}
.map-zoom button:hover {
background-color: #f8f8f8;
color: #000;
}
.map-zoom button:active {
box-shadow: none;
background-color: #eee;
}
.map img {
width: 100%;
height: 100%;
object-fit: cover;
}

上面的代碼定義了一個(gè)名為 `map` 的 div 元素，表示地圖的容器，它包含了一個(gè)名為 `map-zoom` 的 div 元素，表示縮放控制器。縮放控制器包含了兩個(gè) button 元素，分別表示放大和縮小按鈕。

CSS 代碼中，我們使用了 Flex 布局來(lái)垂直居中縮放控制器，并使用絕對(duì)定位相對(duì)于地圖容器進(jìn)行定位。

接下來(lái)，我們需要編寫(xiě) JavaScript 代碼來(lái)實(shí)現(xiàn)縮放地圖的功能。我們需要給每個(gè) button 元素添加一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，執(zhí)行相應(yīng)的縮放操作。

const map = document.querySelector('.map');
const zoomInBtn = document.querySelector('.map-zoom button:first-of-type');
const zoomOutBtn = document.querySelector('.map-zoom button:last-of-type');
let zoomLevel = 1;
zoomInBtn.addEventListener('click', () =>{
zoomLevel += 0.1;
map.style.transform = `scale(${zoomLevel})`;
});
zoomOutBtn.addEventListener('click', () =>{
zoomLevel -= 0.1;
map.style.transform = `scale(${zoomLevel})`;
});

上面的代碼中，我們首先獲取了地圖容器和兩個(gè) button 元素，然后定義了一個(gè) `zoomLevel` 變量，表示當(dāng)前縮放級(jí)別，默認(rèn)為 1。

接著，我們給每個(gè) button 元素添加了一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器。當(dāng)用戶(hù)點(diǎn)擊放大按鈕時(shí)，`zoomLevel` 變量增加 0.1，同時(shí)使用 CSS 的 `scale` 屬性將地圖縮放到相應(yīng)的級(jí)別。同理，當(dāng)用戶(hù)點(diǎn)擊縮小按鈕時(shí)，`zoomLevel` 變量減少 0.1，地圖也相應(yīng)地縮小。

至此，我們就成功地實(shí)現(xiàn)了地圖左側(cè)的操作縮放功能。用戶(hù)可以方便地調(diào)整地圖的大小和位置，以便更好地瀏覽。