脚本文件 script.js：
javascript
const map = document.querySelector('.map-container');
const markers = document.querySelectorAll('.map-marker');markers.forEach(marker => {const lat = marker.getAttribute('data-lat');const lng = marker.getAttribute('data-lng');const infoWindow = new google.maps.InfoWindow({content: marker.querySelector('p').innerHTML});const markerOptions = {position: { lat: parseFloat(lat), lng: parseFloat(lng) },map: map,title: marker.querySelector('p').innerHTML};const markerInstance = new google.maps.Marker(markerOptions);markerInstance.addListener('click', () => {infoWindow.open(map, markerInstance);});
});样式文件 style.css：
css
/ 地图容器 /
.map-container {position: relative;width: 100%;height: 100vh;
}/ 地图图像 /
.map-container img {width: 100%;height: 100%;object-fit: cover;
}/ 地图覆盖层，用于放置标记 /
.map-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}/ 地图标记 /
.map-marker {position: absolute;display: flex;justify-content: center;align-items: center;width: 30px;height: 30px;background-color: ff0000;color: fff;font-size: 12px;border-radius: 50%;cursor: pointer;transform: translate(-50%, -50%);
}
